部署到 Firebase 托管时，Flutter 视频播放器插件无法正常工作

Question

我已经构建了使用来自

https://pub.dev/packages/video_player

的 video_player 2.6.0 包的小部件。

这是代码：

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

void main() => runApp(const VideoApp());

/// Stateful widget to fetch and then display video content.
class VideoApp extends StatefulWidget {
  const VideoApp({super.key});

  @override
  _VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<VideoApp> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4')
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: Center(
          child: _controller.value.isInitialized
              ? AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                )
              : Container(),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              _controller.value.isPlaying
                  ? _controller.pause()
                  : _controller.play();
            });
          },
          child: Icon(
            _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller. Dispose();
  }
}

我可以在 Chrome 上调试时播放视频，但是当我按照此说明部署到 Firebase 托管时https://firebase.google.com/docs/hosting，该视频无法播放。

您能帮我解决这个问题吗？ 谢谢。

执行

video_player 2.6.0

包的示例部分中的相同代码。

Answer 1

注意：

For Web, not all video formats are supported

Web 平台不支持 dart:io，因此请避免使用插件的 VideoPlayerController.file 构造函数。使用构造函数尝试创建一个 VideoPlayerController.file，该文件将引发 UnimplementedError。

• 不同的网络浏览器可能具有不同的视频播放功能（支持的格式、自动播放...）。

• VideoPlayerOptions.mixWithOthers 选项无法在 Web 中实现，至少目前是这样。如果您在网络中使用此选项，它将被默默忽略。

支持的格式

在 Web 上，可用格式取决于用户的浏览器（供应商和版本）。

Web 平台的限制

Web 平台上的视频播放存在一些限制，这可能会让更熟悉移动/桌面目标的开发人员感到惊讶。

排名不分先后：

飞镖：io

Web 平台不支持 dart:io，因此尝试创建 VideoPlayerController.file 将抛出 UnimplementedError。

自动播放

在没有用户与网站交互（“用户激活”）的情况下尝试开始播放带音轨（或未静音）的视频将被浏览器禁止，并导致 JS 中的运行时错误。

检查包：video_player_web以获取更多特定于网络的信息。

Answer 2

我必须将“--web-renderer html”添加到构建 Web 命令中，这解决了问题。