可通过video.buffered.end(0)/video.duration×100计算缓冲百分比，需先判断buffered.length>0且video.duration有效；监听progress事件实时更新，结果用Math.min/max限定0~100范围。
可以通过 video.buffered 属性获取已缓冲的时间范围，再结合 video.duration 和当前播放时间（或目标时间）来计算下载进度百分比。关键在于理解 buffered 是一个 TimeRanges 对象，不是简单的数值。
理解 buffered 属性的结构
video.buffered 返回的是只读的 TimeRanges 对象，它可能包含多个不连续的已缓冲区间（例如因网络波动导致分段加载）。实际开发中通常只关心“从开头到当前可播放的最长连续缓冲区”，即 buffered.end(0)（前提是至少有一个缓冲段）。
- 调用
buffered.length > 0判断是否有有效缓冲数据 -
buffered.start(0)一般为0（从头开始缓冲），但不一定总是如此 -
buffered.end(0)表示第一个缓冲段的结束时间，多数情况下代表“当前已下载到的时间点”
计算缓冲百分比的核心逻辑
缓冲百分比 = buffered.end(0) / video.duration * 100，但必须做安全判断：
- 确保
video.duration已知（监听loadedmetadata或检查isFinite(video.duration)） - 确保
buffered.length > 0，否则返回0 - 避免除零或 NaN，建议用
Math.min(Math.max(percent, 0), 100)限定范围
实时监听缓冲变化的方法
没有专门的 “bufferprogress” 事件，需监听 progress 事件（当浏览器正在获取媒体数据时触发），并在其中更新进度：
立即学习“前端免费学习笔记（深入）”；
video.addEventListener('progress', () => {
if (video.buffered.length > 0 && isFinite(video.duration)) {
const bufferedEnd = video.buffered.end(0);
const percent = (bufferedEnd / video.duration) * 100;
console.log(`已缓冲: ${percent.toFixed(1)}%`);
// 更新进度条UI，例如：progressBar.style.width = percent + '%';
}
});注意与播放进度、下载进度的区别
buffered 不等于已下载字节数百分比，它是按时间维度估算的——基于码率恒定假设。实际网络中，相同时间长度的视频片段可能因编码差异占用不同体积；且 buffered 只反映解码准备就绪的时段，不体现底层 TCP 接收或磁盘写入状态。如需更精确的下载控制，需配合 Media Source Extensions（MSE）+ Fetch API 自行管理分片。
