Flutter(网络)video_player 自动播放

Flutter (web) video_player Autoplay

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

到目前为止,我唯一能做到的就是在我手动刷新页面时让它们到达 play/loop。

我确定这很简单,但是在 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();
  }
}

Chrome 或其他浏览器可能不允许自动播放视频 here and mentioned by the video_player_web author 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

更简单:初始化controller后放在'then'部分

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