我正在尝试在Flutter网络应用上播放Firebase上托管的视频。我不知道这怎么可能。
[使用flutter本机，使用video-player插件，但仅适用于ios和android。
有人可以告诉我是否可以将视频集成到波动的Web应用程序中吗？
我已经尝试使用dart：html包来实现这一目标。包中的videoElement类看起来很相关。但是我无法将元素呈现为小部件。
prefix1.VideoElement element = prefix1.VideoElement();
element.height = 200;
element.width = 200;
)
我想在我的抖动网页上添加视频播放选项。
我已经详细说明here使用余辉视频播放器的解决方案。
您可以将其替换为您选择的任何HTML / JS视频播放器，方法是相同的。
基本上，您需要更改index.html模板文件并使用dart：html或universal_html包与DOM进行交互，以播放所需的视频文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web Video Player</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></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');