在 flutter web 中播放视频

Question

我正在尝试使用最近启动的 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();

Answer 1

在我运行来自 flutter web repo 的 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'),
  ));
}

Answer 2

我已经成功地自动播放了视频并播放了声音。

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

希望对你有帮助，问候。

DART

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>

Answer 3

您现在只需将官方 video_player_web 插件添加到您的 pubspec.yaml:

video_player: ^0.10.4+1
video_player_web: ^0.1.0

那你就可以按照video player cookbook or use the chewie plugin来搞定UI.

在 flutter web 中播放视频

play video in flutter web

web

flutter

flutter-web