视频无法在 flutter web 应用程序中播放

Question

我试图在 flutter web 应用程序中使用 Viedo 作为脚手架小部件的背景，但视频没有显示，尽管它在 android 中工作正常，但没有显示在 web 中，也没有给出任何类型的错误。

我正在使用这个插件来实现视频播放器https://pub.dev/packages/video_player

我的代码：

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  VideoPlayerController? _videoPlayerController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _videoPlayerController =
    VideoPlayerController.asset("assets/backgroundVideo.mp4")
      ..initialize().then((_) {
        _videoPlayerController!.play();
        _videoPlayerController!.setLooping(true);
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
          body: Stack(
            children: <Widget>[
              SizedBox.expand(
                child: FittedBox(
                  fit: BoxFit.fill,
                  child: SizedBox(
                    width: _videoPlayerController!.value.size.width ?? 0,
                    height: _videoPlayerController!.value.size.height ?? 0,
                    child: VideoPlayer(_videoPlayerController!),
                  ),
                ),
              ),
              Container(
                width: 100,
                height: 100,
                child: Text("Hi"),
              )
            ],
          ),
        ));
  }
}

Answer 1

根据截至 2022 年 12 月 15 日更新的 Chrome 政策，如果您想在网络上无需用户交互的情况下自动播放视频。您应该在初始化时将音频静音。假设您在 initState() 中进行了初始化。

  late VideoPlayerController _videoPlayerController;

  @override
  void initState() {
    super.initState();
    _videoPlayerController =
        VideoPlayerController.asset("assets/videoplayback.mp4")
          ..initialize().then((_) {
            _videoPlayerController.setVolume(0);
            _videoPlayerController.play();
            _videoPlayerController.setLooping(true);
            setState(() {});
          });
  }