有没有办法在播放 youtube 视频的视频播放器中启用控件 flutter web

Question

我正在制作一个页面来显示来自 YouTube 的大量视频，并且正在使用 ext_video_player in flutter web. But now I want to enable show controls. I also want it to be possible for an app. I saw in stack over flow post。但是 chewie 播放器说它需要来自 video_player 而不是 ext_video_player 的视频控制器播放器。有没有其他方法可以做到这一点，以便它既适用于 flutter web 和应用程序，也允许 youtube 视频。 youtube 播放器插件不是一个选择，因为一些 reasons.I 连一个都做不到。代码使用 rn

class videoBox2 extends StatefulWidget {
  String Video;
  videoBox2(this.Video);
  @override
  _videoBox2State createState() => _videoBox2State(Video);
}

class _videoBox2State extends State<videoBox2> {
  String Video;
  bool error = false;
  _videoBox2State(this.Video);
  VideoPlayerController _controller;
  @override
  void dispose(){
    super.dispose();
    _controller.dispose();
  }
  @override
  void initState(){
    super.initState();
    _controller = VideoPlayerController.network(
      Video,
    );

    _controller.initialize().then((value) {
      setState(() {
      });
    });
    _controller.addListener(() {
      if (_controller.value.hasError) {
        setState(() {
          error = true;
          print(Video);
        });
      }
    });
  }
  @override
  Widget build(BuildContext context) {
    return error?Container(
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(15))
        ),
        child: Image(fit:BoxFit.cover,image:NetworkImage("https://hiapseng-thailand.com/wp-content/themes/skywalker/facilities/video-placeholder.jpg"))
    ):GestureDetector(
        onTap:(){
          _controller.value.isPlaying?
          _controller.pause()
              :_controller.play();
        },
        child: Container(
          width:MediaQuery.of(context).size.width*0.7,
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(15))
          ),
          child:  VideoPlayer(_controller),
        )
    );
  }
}

Answer 1

所以我最后做的是一个非常简单的技术。我导入了 chewie 视频播放器并从外部库中的 dart 插件打开了它的文件。然后我把所有的 video_player/video_player.dart 都改成了 ext_video_player/ext_video_player.dart。这是因为 ext_video_player 只是视频播放器

的扩展

警告：- 这将影响您使用 chewie 播放器的所有项目。进行此更改，构建项目，然后删除更改

所以你要做的是转到外部库文件夹，然后打开 Dart 包，然后向下滚动到文件夹 chewie-0.12.0（或你正在使用的任何包）\

然后打开源文件夹，找到这些文件:-\

chewie_player.dart
cupertino_controls.dart
cupertino_progress_bar.dart
material_controls.dart
material_progress_bar.dart
player_with_controls.dart\

现在在所有这些文件中，您必须滚动到顶部并找到这一行

import 'package:video_player/video_player.dart';

并替换为

import 'package:ext_video_player/ext_video_player.dart';

请记住在 pubspec.yaml 中导入 ext_video_player 包。阅读这个包的说明，但基本上你可以提供一个 youtube url 是 VideoPlayer.network() 事物。我希望这能解决你的问题。如果您愿意，也可以将 web-views 用于应用程序或 iframe 用于网站，但不推荐

Answer 2

由于运行 flutter clean 时 Dart 包将被删除，使用@Siddharth 回答，我 fork Chewie 并根据@Siddharth 回答进行编辑（将 video_player 更改为 ext_video_player).

您可以在 pubspec.yaml 中将您的 Chewie 更改为我的 git:

  chewie:
    git:
      url: https://github.com/azhar-rafiq/chewie/

有没有办法在播放 youtube 视频的视频播放器中启用控件 flutter web

Is there a way to enable controls in video player playing youtube videos flutter web

flutter

youtube

video-player

youtubeplayer