Flutter：基于video_player实现视频相关手势控制、全屏播放

最新推荐文章于 2024-08-29 08:43:27 发布

2401_84002482

最新推荐文章于 2024-08-29 08:43:27 发布

阅读量1.2k

点赞数 14

分类专栏： 2024年程序员学习文章标签： flutter 音视频

本文链接：https://blog.csdn.net/2401_84002482/article/details/137363377

版权

本文介绍了在Flutter中使用video_player实现视频的手势控制、全屏播放及进度条刷新。详细讲解了如何根据视频源变化重新初始化、轻触显示控制界面、全屏切换以及手势控制的方法，提供了完整的代码示例。

摘要由CSDN通过智能技术生成

/// 如果控制器存在，清理掉重新创建
_controller.removeListener(_videoListener);
_controller.dispose();
}
setState(() {
/// 重置组件参数
_videoInit = false;
_videoError = false;
});
if (widget.type == VideoPlayerType.file) {
_controller = VideoPlayerController.file(widget.url);
} else if (widget.type == VideoPlayerType.asset) {
_controller = VideoPlayerController.asset(widget.url);
} else {
_controller = VideoPlayerController.network(widget.url);
}

/// 加载资源完成时，监听播放进度，并且标记_videoInit=true加载完成
_controller.addListener(_videoListener);
await _controller.initialize();
setState(() {
_videoInit = true;
_videoError = false;
_controller.play();
});
}

这里有一个需要注意的点：_controller.addListener(_videoListener);我们添加监听一定要在初始化之前添加，不然后续的加载状态无法响应。在监听函数中我们这里使用了GlobalKey去调用组件方法，刷新子组件时间显示的页面显示

void _videoListener() async {
if (_controller.value.hasError) {
setState(() {
_videoError = true;
});
} else {
Duration res = await _controller.position;
if (res >= _controller.value.duration) {
await _controller.seekTo(Duration(seconds: 0));
await _controller.pause();
}
if (_controller.value.isPlaying && _key.currentState != null) {
/// 减少build次数
_key.currentState.setPosition(
position: res,
totalDuration: _controller.value.duration,
);
}
}
}