Question

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

在flutter原生中，使用video-player插件，但仅适用于ios和android。

有人可以告诉我是否可以将视频集成到波动的Web应用程序中吗？

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


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

我想在视频页面上添加视频播放选项。

Answer 1

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

您可以将其替换为您选择的任何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 Web应用中播放视频的唯一方法之一。在Flutter Interact 2019上，Web支持两个软件包，包括video_player_web软件包。上面提供的选项仍然有效，并且在您的用例中可能会为您提供更好的服务。

Answer 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。

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

2 个答案: