在颤动的网络中播放视频

时间:2019-05-22 08:09:32

标签: web flutter flutter-web

我正在尝试使用最近启动的flutter_web创建一个Web应用程序,但是在应用程序内部播放视频时遇到了问题。有人可以指导我如何在flutter_web中播放视频。

  1. 我试图为flutter web创建一个Web插件,但是作为flutter_web的正式文档,我们无法为web创建一个插件。
  2. 我尝试在index.html中添加视频和iframe代码,但没有运气。
  3. 我尝试使用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();

3 个答案:

答案 0 :(得分:2)

您现在可以通过将官方video_player_web插件添加到pubspec.yaml中来使用它:

video_player: ^0.10.4+1
video_player_web: ^0.1.0

然后,您可以按照video player cookbook或使用chewie plugin来获得漂亮的用户界面。

答案 1 :(得分:1)

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

我需要能够与视频互动,例如暂停,停止或播放。

我希望这对您有帮助,问候。

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>

答案 2 :(得分:0)

我一直在同一个问题上苦苦挣扎,直到我从颤抖的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'),
  ));
}