Flutter (web) video_player 自动播放

Question

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

到目前为止，我唯一管理的就是如果我手动刷新页面，让它们播放/循环。

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

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

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 或其他浏览器可能不允许自动播放视频，正如这里指出的和video_player_web作者在这里提到的。

但是，如果您将音量静音，您可以自动播放它。根据这篇文章的回答，您可以使用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();
    });

但是，如果您希望在加载整个网站后播放视频，您可能希望使用此处定义的bodytagsonload属性在 javascript 中执行此操作。