有啥方法可以播放视频或使用 Flutter for web 启动视频？

Posted 2023-02-23

技术标签:

【中文标题】有啥方法可以播放视频或使用 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 是什么意思？是网络应用还是移动应用？这是一个网络应用程序。 【参考方案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"   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 软件包。上面提供的选项仍然有效，可能会在您的用例中为您提供更好的服务。

【讨论】：

这个答案是 ***.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://***.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

【讨论】：

以上是关于有啥方法可以播放视频或使用 Flutter for web 启动视频？的主要内容，如果未能解决你的问题，请参考以下文章

有啥方法可以在 Flutter for Web 中添加谷歌地图？

基于滚动值的 Flutter Web 视频播放

如何在 Flutter 中保持屏幕关闭的视频播放？

Flutter Chewie 视频播放器 - 检查播放何时完成

在 Android WebView 中自动播放嵌入的 YouTube 视频有啥新技巧吗？