为了使用Flutter在iOS或Android上播放视频，大多数人会转向video_player软件包。
不幸的是，Web平台不支持该软件包。我们将探索一种使我们能够通过3个简单步骤播放视频的解决方案：
1.我们需要编辑Web文件夹中的默认index.html模板文件。有了这些修改，我们加载afterglowplayer，并建立一个触发器，在一个 HTML元素，和视频，将作为我们所要播放视频的占位符HTML元素。
这就是我们的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>
2.然后，我们编写一个名为playVideo的Dart函数，该函数将使用Universal_html包与index.html页面进行交互，并传递我们要播放的视频URL：
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](https://pub.dev/packages/video_player) package
}
}
该代码引用了videoPlayer元素，如果存在，则设置其内部HTML以容纳我们使用atUrl参数传递的视频URL 。然后，我们获取有关triggerVideoPlayer元素的参考，并触发鼠标单击。
3.视频将作为整个Flutter应用程序顶部的叠加播放。播放器反应灵敏，并提供播放，暂停，音量，滚动，全屏控制，并显示播放信息。
playVideo('http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4');
如果您需要播放纵向视频（或以纵向模式播放视频），则可以在步骤1 中将宽度与高度交换，或者通过修改playVideo功能来动态地实现。
Afterglow player可以进一步自定义。仅通过将视频ID作为参数发送到步骤2的位修改方法，它也可以播放YouTube或Vimeo视频。
import 'package:flutter/foundation.dart';
import 'package:universal_html/html.dart' as html;void **playHostedVideo**(String **withId,** [bool **isVimeo**=false]) {
if(**kIsWeb**) {
final v = html.window.document.getElementById('**videoPlayer**');
if(v != null) {
if(isVimeo) {
v.setAttribute("data-vimeo-id", withId);
} else {
v.setAttribute("data-youtube-id", withId);
}
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](https://pub.dev/packages/video_player) package
}
}
和第3步变为：
// for playing YouTube video
playHostedVideo('aqz-KE-bpKQ');
// or for playing Vimeo video
playHostedVideo('1084537', true);
作为底注，可以像这样使用任何HTML / JS视频播放器。在最近的项目中使用了Afterglow之后，我选择了Afterglow，我喜欢它的简单性以及它的轻巧性。
翻译自：https://medium.com/flutter-community/flutter-video-player-3a2f4f8562a3
网友评论