在 Flutter Web 中嵌入 Youtube 视频

Posted 2023-02-23

【中文标题】在 Flutter Web 中嵌入 Youtube 视频

【英文标题】：Embedding a Youtube video in Flutter Web

【发布时间】：2020-05-07 01:57:05

【问题描述】：

是否可以在 Flutter 网页中嵌入 Youtube 视频？我尝试使用以下代码将 Youtube 嵌入到我的 Flutter 网站中，但页面上没有出现任何错误消息。

import 'package:flutter_html_view/flutter_html_view.dart';

Container(child: HtmlView(data: """
          <iframe src="https://www.youtube.com/embed/xMzkWfIR9Pk"  ></iframe>
          """)),

还尝试了此处推荐的解决方案 (WebView in Flutter Web)，但这也不起作用。

import 'dart:ui' as ui

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

【问题讨论】：

我快接近了。 ***.com/questions/59890992/…

【参考方案1】：

我以前打包叫flutter_html 但这给了我一些滚动问题。

Html(
    data: '<iframe   src="https://www.youtube.com/embed/D_mCZlQZg9Y" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',
)

【参考方案2】：

你应该去this

  import 'dart:html' as html;
  import 'dart:js' as js;
  import 'dart:ui' as ui;

  String viewID = "your-view-id";

  @override
  Widget build(BuildContext context) 
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
        viewID,
            (int id) => html.IFrameElement()
          ..width = MediaQuery.of(context).size.width.toString()
          ..height = MediaQuery.of(context).size.height.toString()
          ..src = 'https://www.youtube.com/embed/IyFZznAk69U'
          ..style.border = 'none');

    return SizedBox(
      height: 500,
      child: HtmlElementView(
        viewType: viewID,
      ),
    );
  

【讨论】：

ui.platformViewRegistry有错误：尝试更正前缀或导入定义'platformViewRegistry'的库.dartundefined_prefixed_name

名称“platformViewRegistry”是通过前缀“ui”引用的，但在使用该前缀导入的任何库中都没有定义。

【参考方案3】：

ext_video_player 支持 android、ios 和 YouTube 网页版。您可以尝试从 ext_video_player repo 运行示例代码。

我使用不同操作系统的不同浏览器进行了测试。 Android、Mac、Windows 浏览器与 ext_video_player 一起工作正常。但它不适用于 iOS 浏览器。

【讨论】：

我尝试使用您指定的存储库。在网络上不起作用。它只是停留在线性进度小部件上，而不是加载 vid。

【参考方案4】：

至少有两种解决方案：

a) video_player 包现在可以在三个主要平台上正常运行：android、ios 和 web

b) 本文介绍了一种将视频源嵌入到 Flutter Web 小部件中的好方法，即使该文章是针对本地文件的，最终过程也适用于 youtube 等 Web 源：https://vermahitesh.medium.com/play-local-video-on-flutter-web-d757bab0141c