应遍历 video.buffered 的所有区间，找到覆盖 currentTime 的那个区间并取其 end 值作为当前缓冲终点，再除以 duration 得缓冲百分比；需在 loadedmetadata 后计算，避免 duration 无效或 buffered 区间不匹配。
要准确计算并展示 HTML5 视频的缓冲进度，核心是正确解读 video.buffered 返回的 TimeRanges 对象，并结合当前播放位置和总时长做动态判断。直接取 buffered.end(0) 会出错，尤其在用户拖动或网络波动后。
理解 buffered 属性返回的是时间区间，不是百分比
video.buffered 是只读属性，返回一个 TimeRanges 对象，里面可能包含多个不连续的时间段（例如：用户从 120 秒跳播，浏览器就可能缓存了 [0–60] 和 [120–180] 两段）。每个区间用 start(i) 和 end(i) 表示起止时间（单位：秒）。它不直接告诉你“已加载多少%”，必须自己算。
-
buffered.length是已缓存区间的数量，不是缓冲量 -
buffered.start(0)和buffered.end(0)仅对应第一个区间，不能代表当前播放点附近的缓冲状态 - 必须先确保
video.duration已知（监听loadedmetadata后才可靠）
精准定位当前播放位置对应的缓冲终点
缓冲进度应反映“从当前播放时间往前，最近一段已缓冲内容能延续到哪里”。也就是说：找出所有区间中，唯一覆盖 video.currentTime 的那个区间，再取它的 end 值。
- 遍历
for (let i = 0; i - 检查是否满足
video.buffered.start(i) ≤ currentTime ≤ video.buffered.end(i) - 一旦命中，
bufferedEnd = video.buffered.end(i)就是当前可连续播放的最远时间点 - 若没找到（比如刚拖动完、还没开始缓冲），则缓冲进度为 0%
实时更新缓冲百分比并渲染到 UI
不能依赖 bufferedupdate 事件（非标准，已废弃），推荐两种稳定方式：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 监听
timeupdate事件，在每次播放时间变化时调用计算函数（适合播放中） - 搭配
setInterval每 300ms 主动检查一次（覆盖暂停、静音等timeupdate不触发的场景） - 将结果写入
<progress value="xx" max="100">或更新自定义进度条的宽度样式
示例函数：
function getBufferedPercent(video) {
const time = video.currentTime;
let bufferedEnd = 0;
for (let i = 0; i if (video.buffered.start(i) bufferedEnd = video.buffered.end(i);
break;
}
}
return video.duration ? Math.min(100, (bufferedEnd / video.duration) * 100) : 0;
}
兼容性与常见陷阱提醒
Safari 对 buffered 更新较保守，有时返回空或延迟；Chrome/Firefox 更及时。因此需加兜底逻辑：
- 初始阶段
duration为 NaN？先监听loadedmetadata -
buffered.length === 0不代表没缓冲，可能是尚未触发progress事件，建议结合readyState判断 - 避免用
progress事件做唯一依据——它只表示“正在下载”，不保证缓冲完成或覆盖当前时间 - 若需全量预加载，
preload="auto"不够可靠，可配合play()+pause()策略或 Blob URL 方案
