有什么方法可以播放视频或使用 Flutter for web 启动视频？答案

【问题标题】：Any way to play video or launch to the video with flutter for web?有什么方法可以播放视频或使用 Flutter for web 启动视频？
【发布时间】：2019-10-05 08:06:19
【问题描述】：

我想播放 youtube 视频或启动到 youtube url，但我找不到方法，因为如果你使用 url_launcher 或 video_player，flutter web 将无法运行，它说你不能运行颤振 SDK。
那么有什么办法可以让用户看到视频吗？

【问题讨论】：

使用flutter webview包。并添加嵌入的html
感谢您提供信息丰富的评论，我该怎么做？对不起，我是新手。
你所说的 flutter for web 是什么意思？是网络应用还是移动应用？
这是一个网络应用程序。

标签： flutter

【解决方案1】：

我详细介绍了here 一个使用Afterglow 视频播放器的解决方案。

Afterglow 视频播放器支持播放 YouTube 视频（甚至是 Vimeo 视频），因此可以满足您的需求。

基本上，您需要更改 index.html 模板文件并使用 dart:html 或 universal_html 包与 DOM 交互以播放您想要的视频。您需要知道要播放的 YouTube 视频的视频 ID。

index.html 将如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Web YouTube 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="triggerYouTubeVideoPlayer" class="afterglow" href="#videoPlayer"></a>
    <video id="youTubeVideoPlayer" width="960" height="540" data-skin="dark">
    </video>
  </body>
</html>

您需要一个 playYouTubeVideo 方法，如下所示：

import 'package:flutter/foundation.dart';
import 'package:universal_html/html.dart' as html;

void playYouTubeVideo(String withId) {
  if(kIsWeb) {
    final v = html.window.document.getElementById('youTubeVideoPlayer');
    if(v != null) {
      v.setAttribute("data-youtube-id", withId);
      final a = html.window.document.getElementById( 'triggerYouTubeVideoPlayer' );
      if(a != null) {
        a.dispatchEvent(html.MouseEvent('click'));
      }
    }
  } else {
    // we're not on the web platform
    // and should use the video_player package
  }
}

您将像这样播放视频：

playYouTubeVideo('5jidaSuRVKw');

您可以将其替换为您选择的任何 HTML/JS 视频播放器，方法相同。

在 2019 年 12 月 10 日之前，这种方法是在 Flutter 网络应用中播放视频的唯一方法之一。在 Flutter Interact 2019 提供几个软件包的 Web 支持，包括 video_player_web 软件包。上面提供的选项仍然有效，可能会在您的用例中为您提供更好的服务。

【讨论】：

这个答案是 stackoverflow.com/a/58917425/1318946 的副本，刚刚复制并粘贴了 3 分钟。顺便说一句，做得很好。

【解决方案2】：

在此处查看此示例： HTML PLATFORM VIEW example

void main() {
  ui.platformViewRegistry.registerViewFactory(
      'hello-world-html',
      (int viewId) => IFrameElement()
        ..width = '640'
        ..height = '360'
        ..src = 'https://www.youtube.com/embed/IyFZznAk69U'
        ..style.border = 'none');

  runApp(Directionality(
    textDirection: TextDirection.ltr,
    child: SizedBox(
      width: 640,
      height: 360,
      child: HtmlElementView(viewType: 'hello-world-html'),
    ),
  ));
}

【讨论】：

你在 web 的非分叉颤振中有一个工作的 ui 导入吗？

【解决方案3】：

我找到了打开链接的方法，但我仍然不知道如何播放视频。
我想我应该等它稳定下来。

import 'dart:html' as html;
onPressed: () {
  html.window.open('https://stackoverflow.com/', 'Dummy');
}

【讨论】：

【解决方案4】：

将合并发布到 Flutter 主库

我为此苦苦挣扎了一段时间，但目前您应该使用'dart:ui' 库而不是flutter_for_web_ui 版本。这仍然会给出一个错误，您应该忽略并运行它。

import 'dart:ui' as ui;

void main() {
  ui.platformViewRegistry.registerViewFactory( // platformViewRegistry will show as error
          'hello-world-html',
          (int viewId) => IFrameElement()
            ..width = '640'
            ..height = '360'
            ..src = 'https://www.youtube.com/embed/IyFZznAk69U'
            ..style.border = 'none');

      runApp(Directionality(
        textDirection: TextDirection.ltr,
        child: SizedBox(
          width: 640,
          height: 360,
          child: HtmlElementView(viewType: 'hello-world-html'),
        ),
      ));
    }

这里是引用的问题ui.platformViewRegistry issue

【讨论】：