如何在Flutter中播放视频列表?

vm0i2vca  于 2023-06-24  发布在  Flutter
关注(0)|答案(4)|浏览(213)

我正在使用flutter video_player包播放一个列表的视频。

List sourceList;

sourceList = [
  {
    "size": 69742504,
    "name": "lucky-roulette.mp4",
    "mimetype": "video/mp4",
  },
  {
    "size": 69742504,
    "name": "BigBuckBunny.mp4",
    "mimetype": "video/mp4",
  }
];

我已经检查了this issue,并在它上面做了一些自定义代码。

void play() {
  log.fine("Now playing: $_nowPlayingUrl");
  _adController = VideoPlayerController.network(_nowPlayingUrl);
  _adController.initialize().then((_) => setState(() {}));
  _adController.play();
  _adController.addListener(checkIfVideoFinished);
}

void checkIfVideoFinished() {
  if (_adController == null ||
      _adController.value == null ||
      _adController.value.position == null ||
      _adController.value.duration == null) return;
  if (_adController.value.position.inSeconds ==
      _adController.value.duration.inSeconds) {
    _adController.removeListener(checkIfVideoFinished);
    _adController.dispose();
    // Change _nowPlayingIndex
    setState(() {
      _nowPlayingIndex = (_nowPlayingIndex + 1) % _totalIndex;
    });
    play();
  }
}

但使用此代码片段将发出异常Another exception was thrown: A VideoPlayerController was used after being disposed.
有没有更好的方法在Flutter中播放和循环视频列表?

odopli94

odopli941#

最近我测试了视频列表示例。请在github FlutterVideoListSample中查看源代码。我认为视频部件必须被处理掉。
在我的例子中,我在初始化之前清除旧的VideoPlayerController。我不使用chewie插件,使新的页面进入全屏,所以不能处理下一个视频部件。

video_player: '>=0.10.11+1 <2.0.0'

中的一些代码FlutterVideoListSample

VideoPlayerController _controller;

void _initializeAndPlay(int index) async {
  print("_initializeAndPlay ---------> $index");
  final clip = _clips[index];
  final controller = VideoPlayerController.asset(clip.videoPath());
  final old = _controller;
  if (old != null) {
    old.removeListener(_onControllerUpdated);
    old.pause(); // mute instantly
  }
  _controller = controller;
  setState(() {
    debugPrint("---- controller changed");
  });

  controller
    ..initialize().then((_) {
      debugPrint("---- controller initialized");
      old?.dispose();
      _playingIndex = index;
      controller.addListener(_onControllerUpdated);
      controller.play();
      setState(() {});
    });
}
zte4gxcn

zte4gxcn2#

必须在Override dispose方法中调用视频控制器dispose方法。removevideo时不需要调用dispose方法。

qojgxg4l

qojgxg4l3#

这是我如何播放视频列表,我展示了这个来自flutter web应用程序的示例,其中大多数视频播放器都不支持,这就是为什么我使用默认播放器。
但是在Android和IOS上,这个任务在chewiebetter_player包的帮助下非常容易完成。这些软件包提供了非常丰富的配置步骤。
希望它会对你的情况有所帮助。

ListView.separated(
              shrinkWrap: true,
              itemCount: 2,
              itemBuilder: (context, index) {
                VideoPlayerController controller =
                    VideoPlayerController.network(
                        'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')
                      ..initialize().then((_) {});

                controller.play();

                return AspectRatio(
                  aspectRatio: 16 / 9,
                  child: VideoPlayer(controller),
                );
              },
              separatorBuilder: (context, index) {
                return const SizedBox(height: 16.0);
              },
            ),
taor4pac

taor4pac4#

对于任何仍然有问题的人,我能够找到一种方法来解决它。

late VideoPlayerController _controller;
ImagePicker _picker = ImagePicker();

String _videoPath = '';

@override
void initState() {
  super.initState();
  _controller = VideoPlayerController.file(
    File(_videoPath)
  );

  _controller.addListener(() {
    setState(() {});
  });
  _controller.initialize().then((_) => setState(() {}));
  _controller.pause();
}

现在你应该有一个从你的设备中选择视频的功能:::

_chooseFromGallery(){
   _picker.pickVideo(source: ImageSource.gallery).then(((value) {
     if(value != null) {
        _videoPath = value.path;
        _controller.dispose(); // To remove an already existing playing video
        _controller = VideoPlayerController.file(File(_videoPath)); // Update the controller with a new file
        _controller.initialize().then((_) => setState(() {})); // Re-initialize the controller again.
      }
   }));
}

然后在UI部分:

SizedBox(
  child: _videoPath.isEmpty()
       ? Container()
       : AspectRatio(
           aspectRatio: _controller.value.aspectRatio,
           child: Stack(
           alignment: Alignment.bottomCenter,
           children: <Widget>[
              VideoPlayer(_controller),
           ],
          ),
        ),
  ),

注意:你可以把'_chooseFromGallery'函数挂接到任何你想使用的小部件上,可以是一个按钮。

相关问题