Buffered 属性返回 TimeRanges 对象而非百分比，包含已缓冲的时间区间；需结合 duration 与 buffered.end(buffered.length-1) 计算缓冲比例，并注意 duration 可能为 NaN 及浏览器兼容性问题。
Buffered 属性用于获取 HTML5 <audio></audio> 或 <video></video> 元素当前已缓冲的媒体时间范围，返回一个 TimeRanges 对象，而非简单的百分比或数字。
理解 Buffered 是一个 TimeRanges 对象
它不是直接返回 0–1 的浮点数，而是一个类似数组的只读对象，包含若干个已缓冲的时间区间（start 和 end 时间戳，单位为秒）。例如：
- 可能返回
{ length: 2, start(0): 0, end(0): 12.5, start(1): 25.3, end(1): 48.7 } - 表示视频已缓冲了 [0s–12.5s] 和 [25.3s–48.7s] 两段
获取当前缓冲比例的常用方法
要换算成“已缓冲进度（%）”，需结合 duration 属性，并取最后一段（或最大连续段）的 end 值。典型做法是：
- 先检查
buffered.length > 0，避免访问空对象报错 - 取最后一段的
buffered.end(buffered.length - 1)（通常代表最远缓冲位置） - 用
Math.min(1, buffered.end(buffered.length - 1) / video.duration)防止 duration 未就绪时计算出 NaN 或超 100%
注意时机与兼容性细节
Buffered 数据动态变化，且依赖网络和解码状态：
立即学习“前端免费学习笔记（深入）”；
-
duration可能为NaN（如元数据未加载完成），建议监听loadedmetadata事件后再读取 - 部分浏览器（尤其移动端）可能只提供粗粒度缓冲信息，甚至始终返回空
TimeRanges - 不能依赖
buffered实时反映“下载中”的进度——它只表示已解码并可播放的部分，不等同于progress事件中的下载字节进度
简单实用示例
以下代码可在控制台输出大致缓冲百分比（带防错）：
const media = document.querySelector('video');
media.addEventListener('timeupdate', () => {
if (media.buffered.length > 0 && !isNaN(media.duration)) {
const bufferedEnd = media.buffered.end(media.buffered.length - 1);
const percent = Math.round((bufferedEnd / media.duration) * 100);
console.log(`已缓冲：${percent}%`);
}
});
