為了使用Flutter在iOS或Android上播放視頻，大多數(shù)人會(huì)轉(zhuǎn)向video_player軟件包。
不幸的是，Web平臺(tái)不支持該軟件包。我們將探索一種使我們能夠通過3個(gè)簡(jiǎn)單步驟播放視頻的解決方案：
1.我們需要編輯Web文件夾中的默認(rèn)index.html模板文件。有了這些修改，我們加載afterglowplayer，并建立一個(gè)觸發(fā)器，在一個(gè) 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.然后，我們編寫一個(gè)名為playVideo的Dart函數(shù)，該函數(shù)將使用Universal_html包與index.html頁面進(jìn)行交互，并傳遞我們要播放的視頻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元素，如果存在，則設(shè)置其內(nèi)部HTML以容納我們使用atUrl參數(shù)傳遞的視頻URL 。然后，我們獲取有關(guān)triggerVideoPlayer元素的參考，并觸發(fā)鼠標(biāo)單擊。
3.視頻將作為整個(gè)Flutter應(yīng)用程序頂部的疊加播放。播放器反應(yīng)靈敏，并提供播放，暫停，音量，滾動(dòng)，全屏控制，并顯示播放信息。
playVideo('http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4');
如果您需要播放縱向視頻（或以縱向模式播放視頻），則可以在步驟1 中將寬度與高度交換，或者通過修改playVideo功能來動(dòng)態(tài)地實(shí)現(xiàn)。
Afterglow player可以進(jìn)一步自定義。僅通過將視頻ID作為參數(shù)發(fā)送到步驟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步變?yōu)椋?/p>
// for playing YouTube video
playHostedVideo('aqz-KE-bpKQ');
// or for playing Vimeo video
playHostedVideo('1084537', true);
作為底注，可以像這樣使用任何HTML / JS視頻播放器。在最近的項(xiàng)目中使用了Afterglow之后，我選擇了Afterglow，我喜歡它的簡(jiǎn)單性以及它的輕巧性。
翻譯自：https://medium.com/flutter-community/flutter-video-player-3a2f4f8562a3
