HTML5 元素通过 buffered 属性（TimeRanges 对象）结合 duration 手动计算缓冲百分比，常用 buffered.end(0)/duration*100；需监听 loadedmetadata 和 progress 事件，并校验 buffered.length 与 duration 有效性。
HTML5 的 元素本身不直接提供“已缓冲百分比”这样的计算结果，但可以通过其 buffered 属性（返回 TimeRanges 对象）结合 duration 和当前播放时间来手动计算已缓冲的进度范围。关键在于理解 buffered 是一个**时间范围集合**，不是单个数值，且可能包含多个不连续的缓冲区间（例如用户跳转后，前后两段被缓存）。
获取最新缓冲区的结束时间（常用场景）
大多数情况下，我们关心的是“从开头到当前已连续缓存的最远位置”，即第一个缓冲区间（通常为 buffered.start(0) 到 buffered.end(0)），前提是视频/音频是从头开始加载且未跳转：
-
audio.buffered.length > 0表示至少有一段缓冲数据 -
audio.buffered.start(0)通常是0（从头开始加载时） -
audio.buffered.end(0)是当前连续缓冲的结束时间（秒） - 缓冲进度百分比 ≈
Math.min(100, (audio.buffered.end(0) / audio.duration) * 100)
处理多缓冲区间与跳转情况
如果用户拖动进度条或网络分段加载，buffered 可能含多个区间（如 [0–12.5, 45.2–68.7]）。此时“已缓冲进度”需明确语义：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 若指「最早开始、最长连续缓冲段的结束点」：仍优先取
buffered.end(0)（多数浏览器按加载顺序排列） - 若指「所有已缓冲时间总和占比」：需遍历所有区间累加
end(i) - start(i)，再除以duration - 注意：
buffered.length可能为 0（尚未开始缓冲）或duration为NaN（元数据未加载完成），需先监听loadedmetadata事件
实用代码示例（实时更新缓冲进度）
以下代码监听 progress 事件（缓冲更新时触发），安全计算并更新进度条：
const audio = document.querySelector('audio');
let progressBar = document.getElementById('buffer-bar'); // 假设是 <div> 进度条
<p>audio.addEventListener('loadedmetadata', () => {
// duration 可用后才开始监听
audio.addEventListener('progress', updateBuffered);
});</p>
<p>function updateBuffered() {
if (audio.buffered.length === 0 || isNaN(audio.duration)) return;</p>
<p>const bufferedEnd = audio.buffered.end(0); // 取第一段结尾（主流行为）
const percent = (bufferedEnd / audio.duration) * 100;
progressBar.style.width = Math.max(0, Math.min(100, percent)) + '%';
}
</p>
<h3>注意事项与兼容性提醒</h3>
<p><code>buffered</code> 在部分移动端浏览器（如旧版 iOS Safari）中可能返回空或不准确，且无法反映预加载策略（<code>preload="none"</code> 时初始为空）。建议：</p>
<ul>
<li>始终检查 <code>audio.buffered.length > 0</code> 和 <code>!isNaN(audio.duration)</code>
</li>
<li>避免仅依赖 <code>buffered.end(0)</code> 判断“是否可播放到某时间点”，应配合 <code>canplaythrough</code> 事件</li>
<li>不要用 <code>buffered</code> 替代下载进度（它反映解码缓冲，非网络字节）</li>
</ul>
</div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
