Я пытаюсь создать веб-приложение, используя недавно запущенный flutter_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();
Я боролся с той же проблемой, пока не запустил пример 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'),
));
}
Мне удалось воспроизвести видео автоматически и воспроизвести звук.
Мне нужно иметь возможность взаимодействовать с видео, например ставить на паузу, останавливать или воспроизводить.
Я надеюсь, что это поможет вам, приветствую.
ДАРТ
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>
Теперь вы можете просто использовать официальный плагин video_player_web, добавив его в свой pubspec.yaml
:
video_player: ^0.10.4+1
video_player_web: ^0.1.0
Затем вы можете следовать кулинарная книга видеоплеера или использовать жевательный плагин, чтобы получить приятный пользовательский интерфейс.
Интересно, может ли Chevie работать в Интернете на iphone? Я пробовал, это работает только на десктопном вебе. но не на айфоне
Это полный код элемента видео: gist.github.com/ziyadElon/b10579f5d80f469c4d4c22a1fe454ccd.