2

我正在尝试在我的颤振网络应用程序上播放托管在 firebase 上的视频。我不知道这怎么可能。

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

有人可以告诉我是否可以将视频集成到颤振的网络应用程序中？

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


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

我想在我的颤振网页中添加一个视频播放选项。

4

2 回答 2

3

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

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

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

  1. 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>
  1. 你需要一个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
  }
}
  1. 你会像这样播放视频：
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包。上面提供的选项仍然有效，并且可以在您的用例中为您提供更好的服务。

于 2019-11-18T15:02:03.300 回答
0

Flutter video_player插件现在通过federation支持 web 使用video_player_web插件。

这是来自Pub 页面的引用：

要在您的 Flutter Web 应用程序中使用此插件，只需使用依赖项将其作为依赖项添加到您的 pubspec 中git。这只是暂时的：未来我们希望使这个包成为“认可”的实现video_player，这样当你依赖package:video_player.

dependencies:
  video_player: ^0.10.4
  video_player_web:
    git:
      url: git://github.com/flutter/plugins.git
      path: packages/video_player/video_player_web

一旦你video_player_web在你的 pubspec 中有依赖，你应该可以package:video_player正常使用。

于 2019-12-27T09:53:15.407 回答