android - 如何在运行时正确更改视频播放器源？

Question

我正在构建一个基本上是 YouTube 克隆的应用程序。我使用官方的 video_player 插件进行播放，使用chewie 进行控制。我想实现一个质量切换器，以便用户可以决定他们希望以什么质量流式传输视频

我已经构建了一个带有开关的底部表，然后运行 ​​changeQuality()当用户选择所需的质量时。它应该做的只是给旧播放器一个新的源文件，并从视频离开的地方继续播放。

这是在 initState() 上运行的视频播放器和咀嚼播放器:

videoPlayer = VideoPlayerController.network(data == null
    ? dataAll[indexNo]["video"]["480"]
    : data[indexNo]["video"]["480"]);

chewieController = ChewieController(
    videoPlayerController: videoPlayer,
    aspectRatio: 16 / 9,
    autoPlay: true,
    allowedScreenSleep: false,
    placeholder: data == null
      ? Image(
      image: NetworkImage(dataAll[indexNo]["thumbnail"]),
      )
      : Image(
         image: NetworkImage(data[indexNo]["thumbnail"]),
      )
);

和 changeQuality()功能:

changeQuality(String newQuality) {
  setState(() {
    position = videoPlayer.value.position;
    chewieController.pause();
    videoPlayer = new VideoPlayerController.network(data == null
      ? dataAll[indexNo]["video"]["$newQuality"]
      : data[indexNo]["video"]["$newQuality"]);
    chewieController = ChewieController(
      videoPlayerController: videoPlayer,
      aspectRatio: 16 / 9,
      autoPlay: true,
      allowedScreenSleep: false,
      startAt: position,
    );
  });
  Navigator.of(context).pop();
}

我也尝试过处置旧的视频播放器，然后设置新值，但我得到一个错误，即处置后无法使用变量。

切换器有点工作，因为它会改变质量大约 4 到 5 次，然后它会遇到错误并且不会播放任何东西。

Answer 1

我扩展 this solution for video_player并将其扩展到也覆盖咀嚼。
此解决方案的关键部分

您需要两个小部件。 MyVideoPlayer 封装了 video_player 和chewie 以及一个外部小部件，您可以在其中对用户输入或状态更改使用react并用新的替换 MyVideoPlayer。

这个解决方案以一种方式绕过了整个问题。我没有解决如何更改video_player 或chewie 的视频。相反，它遵循有关如何在主机小部件 (MyVideoPlayer) 的整个生命周期中使用咀嚼物并将其换出以更改视频 url 的文档化原则。

如果您不想将其仅用于包含 MyVideoPlayer，则可以在外部小部件中添加更多您认为合适的内容。 IE。如果您想要根据应用程序状态与其相邻的描述文本。

外部小部件
我用 this. 写信但在 Dart 代码中可以省略。

class QuizVideoPlayer extends StatefulWidget {
  @override
  _QuizVideoPlayerState createState() => _QuizVideoPlayerState();
}

class _QuizVideoPlayerState extends State<QuizVideoPlayer> {
  Word _url;
  UniqueKey _urlKey;

  // Call this method from button or in reaction to model change etc.
  // I call it from Provider.of in didChangeDependencies, but I don't think it is
  // a necessary detail of the answer as it depends on how you do state management.
  // The key in this solution is that state management occur in the outer widget and
  // due to some trigger call _changeUrl() which changes _url and _urlKey which then
  // swaps out MyVideoPlayer.
  @override
  void _changeUrl(String newUrl) async {
    this.setState(() {
      // Rebuild MyVideoPlayer with a new instance => eventually dispose old controllers
      this._url = newUrl;
      this._urlKey = UniqueKey();
    });
  }

  @override
  Widget build(BuildContext context) {
    return 
      /* ... */
      this._url != null
          ? MyVideoPlayer(
              this._url,
              this._urlKey,
            )
          : AspectRatio(
              aspectRatio: 3 / 2,
              child: Container(color: Colors.black),
            )
      /* ... */
    );
  }
}

我的视频播放器
我用 this. 写信但在 Dart 代码中可以省略。

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:chewie/chewie.dart';

class MyVideoPlayer extends StatefulWidget {
  final String videoUrl;
  final UniqueKey newKey;

  MyVideoPlayer(this.videoUrl, this.newKey): super(key: newKey); // passing Unique key to dispose old class instance and create new with new data

  @override
  _MyVideoPlayerState createState() => _MyVideoPlayerState();
}

class _MyVideoPlayerState extends State<MyVideoPlayer> {
  VideoPlayerController _controller;
  ChewieController _chewie;

  @override
  void initState() {
    this._initControllers(this.widget.videoUrl);
    super.initState();
  }

  void _initControllers(String url) {
    this._controller = VideoPlayerController.network(url);
    this._chewie = ChewieController(
      videoPlayerController: this._controller,
      autoPlay: true,
    );
  }

  @override
  void dispose() {
    this._controller?.dispose();
    this._chewie?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Chewie(controller: this._chewie);
  }
}