如何在 Flutter Web 中实现视频播放？答案

【问题标题】：How can I implement video playback in flutter web?如何在 Flutter Web 中实现视频播放？
【发布时间】：2019-11-10 22:54:42
【问题描述】：

我正在尝试在我的 Flutter Web 应用上播放托管在 firebase 上的视频。我不知道这怎么可能。

在 Flutter Native 中，使用了 video-player 插件，但仅适用于 ios 和 android。

谁能告诉我是否可以在 Flutter Web 应用中集成视频？

我已经尝试使用 dart:html 包来实现这一点。包中的 videoElement 类看起来很相关。但我无法将元素呈现为小部件。


    prefix1.VideoElement element = prefix1.VideoElement();
        element.height = 200;
        element.width = 200;
    )

我想在我的 Flutter 网页中添加视频播放选项。

【问题讨论】：

标签： flutter dart-html flutter-web

【解决方案1】：

我详细介绍了here 使用 Afterglow 视频播放器的解决方案。

您可以将其替换为您选择的任何 HTML/JS 视频播放器，方法相同。

基本上，您需要更改 index.html 模板文件并使用 dart:html 或 universal_html 包与 DOM 交互以播放您想要的视频文件。

index.html 将如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Web Video Player</title>
    <script src="https://cdn.jsdelivr.net/npm/afterglowplayer@1.x"></script></head>
  <body>
    <script src="main.dart.js" type="application/javascript"></script>
    <a id="triggerVideoPlayer" class="afterglow" href="#videoPlayer"></a>
    <video id="videoPlayer" width="960" height="540" data-skin="dark">
    </video>
  </body>
</html>

您需要一个 playVideo 方法，如下所示：

import 'package:flutter/foundation.dart';
import 'package:universal_html/html.dart' as html;
void playVideo(String atUrl) {
  if(kIsWeb) {
    final v = html.window.document.getElementById('videoPlayer');
    if(v != null) {
      v.setInnerHtml(
        '<source type="video/mp4" src="$atUrl">',
        validator: html.NodeValidatorBuilder()
        ..allowElement('source', attributes: ['src', 'type']));
      final a = html.window.document.getElementById( 'triggerVideoPlayer' );
      if(a != null) {
        a.dispatchEvent(html.MouseEvent('click'));
      }
    }
  } else {
    // we're not on the web platform
    // and should use the video_player package
  }
}

您将像这样播放视频：

playVideo('http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4');

在 2019 年 12 月 10 日之前，这种方法是在 Flutter 网络应用中播放视频的唯一方法之一。在Flutter Interact 2019 提供几个包的网络支持，包括video_player_web 包。上面提供的选项仍然有效，可能会在您的用例中为您提供更好的服务。

【讨论】：

视频播放在整个 Flutter 应用之上，如何在 widget 内播放？
使用这个包：pub.dev/packages/video_player

【解决方案2】：

Flutter video_player 插件现在支持使用 video_player_web 插件到 federation 的 Web。

这是Pub page的引述：

要在您的 Flutter Web 应用程序中使用此插件，只需将其添加为在您的 pubspec 中使用 git 依赖项的依赖项。这只是临时的：在未来我们希望使这个包成为一个“背书” 实现video_player，使其自动包含在内当你依赖 package:video_player 时，在你的 Flutter Web 应用中。
dependencies:
  video_player: ^0.10.4
  video_player_web:
    git:
      url: git://github.com/flutter/plugins.git
      path: packages/video_player/video_player_web
一旦你的 pubspec 中有 video_player_web 依赖项，你应该可以正常使用package:video_player。

【讨论】：

但它仍然不支持在 iphone 的 safari 中播放视频