Question

我想播放youtube视频或启动到youtube url，但找不到任何方法，因为如果您使用url_launcher或video_player，则flutter web将无法运行，并且说您不能与flutter SDK。
那有什么办法可以让用户观看视频？

Answer 1

在此处查看以下示例： 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: HtmlView(viewType: 'hello-world-html'),
    ),
  ));
}

Answer 2

我已经详细介绍了here使用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 Web应用中播放视频的唯一方法之一。在Flutter Interact 2019上，Web支持两个软件包，包括video_player_web软件包。上面提供的选项仍然有效，并且在您的用例中可能会为您提供更好的服务。

Answer 3

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

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

Answer 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: HtmlView(viewType: 'hello-world-html'),
        ),
      ));
    }

以下是引用的问题ui.platformViewRegistry issue

有什么方法可以播放视频或使用Flutter for Web播放视频吗？

4 个答案:

后合并到主Flutter库