我正在尝试在我的 flutter web 应用程序上播放 firebase 上托管的视频。 我不明白这怎么可能。
对于 flutter native ，使用 video-player 插件，但仅适用于 ios 和 android。
有人可以告诉我是否可以将视频集成到 flutter web 应用程序中？
我尝试使用 dart:html 包来实现这一点。包中的 videoElement 类看起来很相关。但我无法将该元素呈现为小部件。
prefix1.VideoElement element = prefix1.VideoElement();
element.height = 200;
element.width = 200;
)
我想向我的 flutter 网页添加视频播放选项。
最佳答案
我已经详细说明了here使用 Afterglow 视频播放器的解决方案。
您可以将其替换为您选择的任何 HTML/JS 视频播放器，方法是相同的。
基本上，您需要更改 index.html 模板文件并使用 dart:html 或 universal_html 包与 DOM 交互播放您想要的视频文件。
- index.html 看起来像:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web Video Player</title>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8e899b8a9d888380989f838e968a9dafdec197" rel="noreferrer noopener nofollow">[email protected]</a>"></script></head>
<body>
<script src="main.dart.js" type="application/javascript"></script>
<a id="triggerVideoPlayer" class="afterglow" href="#videoPlayer"></a>
<video id="videoPlayer" width="960" height="540" data-skin="dark">
</video>
</body>
</html>
import 'package:flutter/foundation.dart';
import 'package:universal_html/html.dart' as html;
void playVideo(String atUrl) {
if(kIsWeb) {
final v = html.window.document.getElementById('videoPlayer');
if(v != null) {
v.setInnerHtml(
'<source type="video/mp4" src="$atUrl">',
validator: html.NodeValidatorBuilder()
..allowElement('source', attributes: ['src', 'type']));
final a = html.window.document.getElementById( 'triggerVideoPlayer' );
if(a != null) {
a.dispatchEvent(html.MouseEvent('click'));
}
}
} else {
// we're not on the web platform
// and should use the video_player package
}
}
playVideo('http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4');
2019 年 12 月 10 日之前，此方法是在 Flutter Web 应用中播放视频的唯一方法之一。在Flutter Interact 2019对几个软件包的网络支持，包括 video_player_web包裹。上面提供的选项仍然有效，并且可能在您的用例中为您提供更好的服务。
关于flutter - 如何在flutter web中实现视频播放？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56816093/