关于dart html：如何在Flutter Web中实现视频播放？


How can I implement video playback in flutter web?

我正在尝试在Flutter网络应用上播放Firebase上托管的视频。
我不知道这怎么可能。

在flutter native中，使用了video-player插件，但仅适用于ios和android。

有人可以告诉我是否可以将视频集成到波动的Web应用程序中吗？

我尝试使用dart：html包来实现这一点。 包中的videoElement类看起来很相关。 但是我无法将元素呈现为小部件。

1
2
3
4
    prefix1.VideoElement element = prefix1.VideoElement();
        element.height = 200;
        element.width = 200;
    )

我想在我的抖动网页上添加视频播放选项。

我在这里详细介绍了使用余辉视频播放器的解决方案。

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

基本上，您需要更改index.html模板文件并使用dart：html或Universal_html包与DOM进行交互，以播放所需的视频文件。

  • index.html将如下所示：
    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        Web Video Player
        <script src="https://cdn.jsdelivr.net/npm/[email protected]"></head>
      <body>
        <script src="main.dart.js" type="application/javascript">
       
        <video id="videoPlayer" width="960" height="540" data-skin="dark">
        </video>
      </body>
    </html>
  • 您将需要如下的playVideo方法：
    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    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(
            '<source type="video/mp4" src="$atUrl">',
            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 package
      }
    }
  • 您将像这样播放视频：
    • 1
    playVideo('http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4');

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

    Flutter video_player插件现在通过联盟使用video_player_web插件支持Web。

    这是Pub页面的报价：

    To use this plugin in your Flutter Web app, simply add it as a
    dependency in your pubspec using a git dependency. This is only
    temporary: in the future we hope to make this package an"endorsed"
    implementation of video_player, so that it is automatically included
    in your Flutter Web app when you depend on package:video_player.

    1
    2
    3
    4
    5
    6
    dependencies:
      video_player: ^0.10.4
      video_player_web:
        git:
          url: git://github.com/flutter/plugins.git
          path: packages/video_player/video_player_web

    Once you have the video_player_web dependency in your pubspec, you
    should be able to use package:video_player as normal.

    相关讨论