You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多
文档控制台
免费开始使用

如何从Flutter的video_player插件获取视频缓冲状态?

解决video_player缓冲时显示加载指示器的问题

你说得对,video_player插件确实没有直接提供一个“正在缓冲”的状态字段,但我们可以通过已缓冲进度当前播放进度的关系来间接判断缓冲状态,从而在需要时显示CircularProgressIndicator

核心思路

当视频处于播放状态时,如果当前播放位置接近已缓冲区域的末尾(比如相差不到500ms),同时已缓冲的总时长还在持续增加,就说明播放器正在后台缓冲数据,这时候就可以显示加载指示器。另外,视频刚启动还没有任何缓冲数据时,也需要显示加载状态。

具体实现步骤

  1. 在你的State类中添加一个布尔变量,用于标记是否正在缓冲:
bool _isBuffering = false;
  1. 初始化视频控制器时,添加监听逻辑来更新缓冲状态:
late VideoPlayerController _controller;

@override
void initState() {
  super.initState();
  _controller = VideoPlayerController.networkUrl(Uri.parse('你的网络视频地址'))
    ..initialize().then((_) {
      setState(() {});
    })
    ..addListener(_checkBufferingStatus);
}

void _checkBufferingStatus() {
  final videoValue = _controller.value;
  // 视频未初始化时,默认显示缓冲状态
  if (!videoValue.isInitialized) {
    if (!_isBuffering) {
      setState(() {
        _isBuffering = true;
      });
    }
    return;
  }

  // 视频已初始化,但未播放时,不需要显示缓冲(除非刚加载)
  if (!videoValue.isPlaying) {
    if (_isBuffering) {
      setState(() {
        _isBuffering = false;
      });
    }
    return;
  }

  // 获取已缓冲的最后一段的结束位置
  final bufferedEnd = videoValue.buffered.isNotEmpty
      ? videoValue.buffered.last.end
      : Duration.zero;
  // 当前播放位置
  final currentPosition = videoValue.position;

  // 判断当前位置是否接近缓冲末尾(这里设置500ms的阈值,可根据需求调整)
  final isNearBufferedEnd = bufferedEnd - currentPosition < const Duration(milliseconds: 500);
  // 判断缓冲是否在进行中(已缓冲时长是否大于上一次记录的时长)
  static Duration? _lastBufferedEnd;
  final isBufferingProgressing = bufferedEnd > (_lastBufferedEnd ?? Duration.zero);
  _lastBufferedEnd = bufferedEnd;

  // 更新缓冲状态
  final shouldShowBuffering = isNearBufferedEnd && isBufferingProgressing;
  if (shouldShowBuffering != _isBuffering) {
    setState(() {
      _isBuffering = shouldShowBuffering;
    });
  }
}
  1. 在build方法中,根据_isBuffering来显示加载指示器:
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      alignment: Alignment.center,
      children: [
        if (_controller.value.isInitialized)
          AspectRatio(
            aspectRatio: _controller.value.aspectRatio,
            child: VideoPlayer(_controller),
          ),
        // 显示缓冲指示器
        if (_isBuffering)
          const CircularProgressIndicator(),
        // 播放进度条(可选)
        Positioned(
          bottom: 20,
          left: 0,
          right: 0,
          child: VideoProgressIndicator(
            _controller,
            allowScrubbing: true,
          ),
        ),
      ],
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        setState(() {
          _controller.value.isPlaying
              ? _controller.pause()
              : _controller.play();
        });
      },
      child: Icon(
        _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
      ),
    ),
  );
}

注意事项

  • 阈值(500ms)可以根据你的需求调整,数值越小,加载指示器会更频繁地触发;数值越大,会更晚触发。
  • 记得在dispose方法中释放控制器:
@override
void dispose() {
  _controller.removeListener(_checkBufferingStatus);
  _controller.dispose();
  super.dispose();
}

这样就能完美实现视频缓冲时显示加载指示器的效果啦!

内容的提问来源于stack exchange,提问作者skybur

火山引擎 最新活动