在 Flutter Web 中播放视频答案

【问题标题】：play video in flutter web在 Flutter Web 中播放视频
【发布时间】：2019-10-08 15:57:00
【问题描述】：

我正在尝试使用最近推出的 flutter_web 创建一个网络应用，但在我的应用中播放视频时遇到了问题。谁能指导我如何在flutter_web中播放视频。

我尝试为 Flutter Web 创建一个 Web 插件，但作为 Flutter_web 的官方文档，我们无法为 Web 创建一个插件。
我尝试在 index.html 中添加视频和 iframe 标记，但没有成功。
我尝试使用 dart:html 提供的 VideoElement，但不知道如何使用。

prefix1.VideoElement element = prefix1.VideoElement();
    element.height = 200;
    element.width = 200;
    element.appendHtml("""<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
    """);
    element.querySelector('#video');
    element.play();

【问题讨论】：

标签： web flutter flutter-web

【解决方案1】：

您现在只需将官方 video_player_web 插件添加到您的 pubspec.yaml 即可使用：

video_player: ^0.10.4+1
video_player_web: ^0.1.0

然后您可以关注video player cookbook 或使用chewie plugin 以获得漂亮的用户界面。

【讨论】：

我想知道chewie是否可以在iphone中上网？我试过了，它只适用于桌面网络。但不是在 iPhone 上

【解决方案2】：

我已经设法自动播放视频并播放声音。

我需要能够与视频进行交互，例如暂停、停止或播放。

希望对你有帮助，问候。

飞镖

import 'package:flutter_web_ui/ui.dart' as ui;
import 'dart:html';

main() async {
  await ui.webOnlyInitializePlatform();
  VideoElement videoElement;
  videoElement = querySelector('#video');
  videoElement.src = "https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4";
  videoElement.muted = false;
  await videoElement.play();
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script defer src="reproductor.dart.js" type="application/javascript"></script>
</head>
<body>    
    <video id="video" class="absolute right-0 bottom-0 min-w-full min-h-full w-auto" controls autoplay muted></video>
</body>
</html>

【讨论】：

【解决方案3】：

在我从 Flutter Web 存储库运行 html_platform_view 示例之前，我一直在为同样的问题苦苦挣扎。试试这个：

void main() {
  ui.platformViewRegistry.registerViewFactory(
    'hello-world-html', 
    (int viewId) => IFrameElement()..src = 'https://www.youtube.com/embed/tgbNymZ7vqY'
  );

  runApp(Directionality(
    textDirection: TextDirection.ltr,
    child: HtmlView(viewType: 'hello-world-html'),
  ));
}

【讨论】：

这包含视频元素的完整代码：gist.github.com/ziyadElon/b10579f5d80f469c4d4c22a1fe454ccd