play video in flutter web

问题

I am trying to create a web app using recently launched flutter_web, but facing issues in playing a video inside my app. Can someone guide me how to play a video in flutter_web.

I tried to create a web plugin for flutter web, but as the official docs of flutter_web we can't create a plugin for web.
I tried to add a video and iframe tag in index.html but no luck.
I tried to use VideoElement provided by dart:html but not sure how to use it.

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();

回答1:

You can now just use the official video_player_web plugin by adding it to your pubspec.yaml:

video_player: ^0.10.4+1
video_player_web: ^0.1.0

Then you can follow the video player cookbook or use the chewie plugin to get a nice UI.

回答2:

I was struggling with the same issue until I ran the html_platform_view example from the flutter web repo. Try this:

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'),
  ));
}

回答3:

I have managed to play the video automatically and play with the sound.

I need to be able to interact with the video, such as pause, stop or play.

I hope it helps you, greetings.

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>

来源：https://stackoverflow.com/questions/56252120/play-video-in-flutter-web

标签

web

Flutter

flutter-web