我正在尝试使用最近启动的flutter_web创建一个Web应用程序,但是在应用程序内部播放视频时遇到了问题。有人可以指导我如何在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();
答案 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'),
));
}