HTML5 的 <video> 元素中的 buffered 属性是一个非常重要的属性，它可以帮助我们了解视频的缓冲状态。

buffered 属性的作用

buffered 属性返回一个 ‌TimeRanges 对象‌，这个对象表示浏览器已经缓冲的视频时间范围。简单来说，它告诉我们视频的哪些部分已经被下载并存储在浏览器缓存中，可以随时播放而不需要再次从网络加载。

TimeRanges 对象详解

TimeRanges 对象是浏览器用来表示时间范围的特殊对象，它具有以下特点：

1. 基本结构

• ‌length 属性‌：表示当前有多少个独立的时间范围

• ‌start(index) 方法‌：获取指定索引的时间范围的开始时间（单位：秒）

• ‌end(index) 方法‌：获取指定索引的时间范围的结束时间（单位：秒）

2. 多段缓冲情况

当用户在视频中跳跃播放或者网络状况变化时，浏览器可能会形成多个不连续的缓冲区域。 例如：

• 视频开始部分：0-10秒缓冲

• 中间部分：30-40秒缓冲

• 结尾部分：80-90秒缓冲

这种情况下，TimeRanges 对象就会包含多个时间范围。

3. 实际应用示例

var video = document.getElementById("myVideo");
// 获取缓冲时间范围
var buffered = video.buffered;
// 获取第一个缓冲段的开始和结束时间
var start = buffered.start(0);
var end = buffered.end(0);
// 获取缓冲段数量
var length = buffered.length;

使用场景

1. 显示缓冲进度条

通过 buffered 属性可以实现更准确的缓冲进度条显示，而不是简单的百分比计算。

2. 播放优化

在用户拖动播放进度条时，可以利用缓冲信息来判断是否可以立即播放，避免卡顿。

注意事项

• buffered 属性是只读的，不能直接修改

• 在视频刚开始加载时，buffered 可能为空，需要等待加载后再获取

• Safari 浏览器对 buffered 的支持可能不如 Chrome 和 Firefox 稳定

• 如果需要精确的缓冲百分比，需要计算所有缓冲段的总时长占视频总时长的比例

通过 buffered 属性和 TimeRanges 对象，开发者可以更好地了解视频的加载和缓冲状态，从而提供更好的用户体验。