JavaScript中如何获取视频缓冲进度？解决预加载进度条问题

你可以通过HTML5 video元素的buffered属性来获取已缓冲的内容，它返回的TimeRanges对象能提供视频中已下载的时间段信息，完全可以用来更新缓冲进度条，比preload属性实用得多。

具体实现步骤 #

• 先获取目标video元素：

  const video = document.getElementById('your-video-element-id');
  

• 通过video.buffered拿到TimeRanges对象，它的length属性表示已缓冲的段数（多数情况下是连续的1段），通过start(index)和end(index)方法可以获取对应缓冲段的起始、结束时间点。
• 计算缓冲进度：取最后一段缓冲的结束时间，除以视频总时长video.duration，就能得到缓冲进度的百分比。

实时更新缓冲进度的示例代码 #

function updateBufferBar() {
  const video = document.getElementById('your-video');
  // 没有缓冲数据或时长未加载时直接返回
  if (!video.buffered.length || !video.duration) return;

  // 获取已缓冲的最大时间点（最后一段缓冲的结束时间）
  const bufferedMaxTime = video.buffered.end(video.buffered.length - 1);
  // 计算缓冲进度百分比
  const bufferPercent = (bufferedMaxTime / video.duration) * 100;

  // 更新缓冲进度条样式（假设进度条元素id为buffer-progress）
  document.getElementById('buffer-progress').style.width = `${bufferPercent}%`;
}

// 监听浏览器下载视频数据的progress事件，实时更新
video.addEventListener('progress', updateBufferBar);
// 监听视频元数据加载完成事件，确保duration可用
video.addEventListener('loadedmetadata', updateBufferBar);

额外说明 #

• progress事件会在浏览器持续下载视频数据的过程中频繁触发，能保证缓冲进度的实时性。
• 必须等视频的duration属性加载完成后再计算进度，否则会得到NaN值，loadedmetadata事件就是用来监听元数据（包括时长）加载完成的时机。

内容的提问来源于stack exchange，提问作者Fire Gamer