Menu
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.
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();
232
Supports hls on chrome and other browsers.
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.
175
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
