Flutter (web) video_player 自动播放

Question

有人知道我需要做什么才能在我的颤振网站加载后自动播放我的视频吗？

到目前为止，我唯一能做的就是让它们在我手动刷新页面时播放/循环播放。

我确信这很简单，但是在完全不编码 3 个月后，我有点生疏了......

目前我在FutureBuilder 内调用_videoPlayerController.play()

class VideoWithChild extends StatefulWidget {
  final String videoSource;
  final FractionalOffset alignment;
  final TextAlign textAlign;
  final Widget child;

  const VideoWithChild(
      {Key key, this.videoSource, this.alignment, this.textAlign, this.child})
      : super(key: key);

  @override
  _VideoWithChildState createState() =>
      _VideoWithChildState(videoSource, alignment, textAlign, child);
}

class _VideoWithChildState extends State<VideoWithChild> {
  final String videoSource;
  final TextAlign textAlign;
  final Widget child;
  final FractionalOffset alignment;
  VideoPlayerController _videoPlayerController;
  Future<void> _initializeVideoPlayerFuture;
  VoidCallback listener;

  _VideoWithChildState(
      this.videoSource, this.alignment, this.textAlign, this.child);

  @override
  void initState() {
    _videoPlayerController = VideoPlayerController.asset(videoSource);
    _initializeVideoPlayerFuture = _videoPlayerController.initialize();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    print('build');
    return FutureBuilder(
      future: _initializeVideoPlayerFuture,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done &&
            _videoPlayerController.dataSource.isNotEmpty) {
              print('connection state');
          _videoPlayerController.play();
          _videoPlayerController.setLooping(true);
          return AspectRatio(
            aspectRatio: _videoPlayerController.value.aspectRatio,
            child: Stack(
              children: <Widget>[
                VideoPlayer(_videoPlayerController),
                LayoutBuilder(
                  builder: (context, constraints) {
                    return Align(alignment: alignment, child: child);
                  },
                )
              ],
            ),
          );
        } else {
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Center(
                child: CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation<Color>(
                Color(0xff49148c),
              ),
            )),
          );
        }
      },
    );
  }

  @override
  void dispose() {
    print('dispose');
    super.dispose();
    _videoPlayerController.dispose();
  }
}

Answer 1

Chrome 或其他浏览器可能不允许自动播放视频，正如 here 指出和 video_player_web 作者 here 提到的那样。

但是，如果您将音量设为静音，则可以自动播放。根据post 的回答，您可以使用WidgetsBinding.instance.addPostFrameCallback 自动播放您的视频。在您的 initState 方法中尝试添加以下行。

WidgetsBinding.instance.addPostFrameCallback((_) {
      // mutes the video
      _videoPlayerController.setVolume(0); 
      // Plays the video once the widget is build and loaded.
      _videoPlayerController.play();
    });

但是，如果您希望在加载整个网站后播放视频，您可能需要在 JavaScript 中使用 body 标签 onload 属性定义 here。

Answer 2

更简单：初始化控制器后放在'then'部分

_controller.initialize().then((value) => _controller.play())