HTML5 中怎么用 JavaScript 获取 buffered 属性计算视频已加载的缓冲区间-H5教程-PHP中文网

video.buffered是timeranges对象，需遍历buffered.length并用start(i)/end(i)获取各缓冲区间；可计算总缓冲时长或校验指定时间点是否已缓冲。

html5 中怎么用 javascript 获取 buffered 属性计算视频已加载的缓冲区间

在 HTML5 中，video 元素的 buffered 属性是一个 TimeRanges 对象，它描述了浏览器已缓存（但不一定已解码）的视频时间区间。要准确获取“已加载的缓冲区间”，不能直接读取 buffered 的长度或某个值，而需遍历其包含的时间范围。

理解 buffered 是 TimeRanges 对象

buffered 不是简单数字或数组，而是一个类似只读集合的对象，内部存储多个不重叠、按时间顺序排列的区间（如 [0, 12.5), [18.3, 45.7)）。它提供两个关键方法：

buffered.length：返回缓冲区间的数量（例如 2 表示有两段已缓存）
buffered.start(index) 和 buffered.end(index)：分别获取第 index 个区间的起始和结束时间（单位：秒）

获取所有缓冲区间（推荐做法）

用循环遍历 buffered.length，逐个提取每个区间的起止时间：

const video = document.getElementById('myVideo');
<p>function getBufferedRanges() {
const ranges = [];
const buffered = video.buffered;</p><p>for (let i = 0; i </p><p>return ranges;
}</p><p>// 示例调用
console.log(getBufferedRanges());
// 输出类似：[{start: 0, end: 12.5}, {start: 18.3, end: 45.7}]
</p>

计算已缓冲总时长（注意非简单相加）

由于区间互不重叠且有序，可直接累加每段长度：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

function getTotalBufferedDuration() {
  const buffered = video.buffered;
  let total = 0;
<p>for (let i = 0; i </p><p>return total; // 单位：秒
}
</p>

⚠️ 注意：该值反映的是已缓存的媒体时长，并非下载字节数或网络进度；若视频启用了分片（如 MSE 或 DASH），buffered 反映的是 SourceBuffer 中已 append 的时间范围。

判断某时刻是否已被缓冲（实用校验）

常用于预判能否无等待跳转（seek）：

function isTimeBuffered(time) {
  const buffered = video.buffered;
  for (let i = 0; i = buffered.start(i) && time // 例如检查第 30 秒是否可立即播放
if (isTimeBuffered(30)) {
video.currentTime = 30;
} else {
console.log('第 30 秒尚未缓冲，seek 可能触发加载');
}

实际使用中建议监听 progress 或 timeupdate 事件来动态更新缓冲状态，避免轮询。buffered 数据实时性高，但仅反映当前已送入解码器前的缓存情况，不保证立即可播放（还需考虑解码延迟、GPU 渲染等）。