在浏览器中实现实现视频播放器

为了使用Flutter在iOS或Android上播放视频，大多数人会转向video_player软件包。

不幸的是，Web平台不支持该软件包。我们将探索一种使我们能够通过3个简单步骤播放视频的解决方案：

1.我们需要编辑Web文件夹中的默认index.html模板文件。有了这些修改，我们加载afterglowplayer，并建立一个触发器，在一个 HTML元素，和视频，将作为我们所要播放视频的占位符HTML元素。

这就是我们的index.html的样子：

 
 
 <title>Web Video Player/<title>
 
 
 
 
 <video>
 /<video>
 

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>',
 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
 }
}

/<source>

该代码引用了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

閱讀更多 開心人開發世界 的文章

關鍵字: You Android 播放