如何在颤动网络中实现视频回放？ [英] How can I implement video playback in flutter web?
本文介绍了如何在颤动网络中实现视频回放？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在Ffltter Web应用程序上播放FireBase上托管的视频。 我想不出这怎么可能。
对于Ffltter原生版本，使用了video-player插件，但该插件仅适用于iOS和Android。
有人能告诉我是否可以将视频集成到Ffltter Web应用程序中吗？
我已经尝试使用dart：html包来实现这一点。包中的avioElement类看起来很相关。但我无法将元素呈现为小工具。
prefix1.VideoElement element = prefix1.VideoElement();
element.height = 200;
element.width = 200;
)
我想将视频播放选项添加到我的Ffltter网页。
推荐答案
我已经详细介绍了使用Afterglow视频播放器的解决方案here。
您可以将其替换为您选择的任何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/afterglowplayer@1.x"></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>
- 您需要一个PlayVideo方法，如下所示：
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日之前，该方法是Ffltter Web应用程序中仅有的播放视频的方式之一。在Flutter Interact 2019上提供了对几个包的Web支持，包括video_player_web包。上面提供的选项仍然有效，并且可能在您的用例中更好地为您服务。
这篇关于如何在颤动网络中实现视频回放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
