Flutter（Web）视频播放器自动播放

Question

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

到目前为止，我唯一成功的是如果手动刷新页面，可以使它们循环播放。

我相信这是一个简单的问题，但我已经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();
  }
}

- Chris

Answer 1

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

但是，如果将音量静音，则可以自动播放。根据这个帖子的答案，您可以使用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属性，如此处所定义。

- Abhilash Chandran

---

太棒了，感谢回复 - 你的解决方案完美地解决了问题！ - Chris

Answer 2

更简单的方法是：在初始化控制器后，将其放在“then”部分。

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

- bd1909