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

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

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

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

这就是我们的index.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**(
        '',
        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