监听 video 缓冲状态应组合使用 waiting（开始缓冲）、playing（缓冲结束）、progress（下载中）事件，并结合 buffered 属性估算已缓存时间范围；readyState 不可直接用于判断缓冲，需以 waiting 且未暂停为可靠“缓冲中”信号。
如何监听 video 元素的缓冲状态变化
HTML5 的 video 元素本身不提供“缓冲中”这类语义化提示，但可通过原生事件感知加载行为。关键不是靠 CSS 或属性开关，而是监听 waiting、playing、canplay、progress 这几个事件组合判断当前是否处于缓冲等待。
-
waiting：视频因数据不足暂停播放时触发（最可靠的“开始缓冲”信号） -
playing：从暂停/缓冲恢复播放时触发（可视为“缓冲结束”） -
progress：浏览器正在下载媒体数据时周期性触发（可用于估算缓冲进度，但不精确） - 注意：
loadstart和loadeddata只反映初始加载，不能代表播放中动态缓冲
用 buffered 属性估算已缓存时间范围
video.buffered 是一个 TimeRanges 对象，表示浏览器已实际下载并可播放的时间区间。它不是百分比，而是以秒为单位的区间集合，常用于绘制缓冲进度条。
- 调用
video.buffered.end(0)获取第一个连续缓冲区的结束时间（多数情况够用） - 用
video.duration做分母可算出大致缓冲比例，但需先确保duration已知（监听loadedmetadata后才可靠） - 注意：Safari 对
buffered的支持较保守，有时返回空或不更新；Chrome/Firefox 更稳定 - 不要直接依赖
buffered.length === 0判断“未缓冲”，因为初始加载后它可能仍为空，应结合readyState
避免常见误判：别把 readyState 当缓冲状态
readyState 描述的是视频资源的就绪程度（0–4），容易被误当作缓冲指示器，但它反映的是“能否播放”，而非“是否正在缓冲”。例如：
-
readyState === 4（HAVE_ENOUGH_DATA）只说明当前帧可播，不代表后续不会卡住 -
readyState === 3（HAVE_FUTURE_DATA）可能仍在后台缓冲，但用户感知不到 - 真正需要拦截的是播放中断瞬间——只有
waiting+paused === false才能确认是“播放中缓冲”
video.addEventListener('waiting', () => {
if (!video.paused) {
showLoadingIndicator(); // 此时才该显示“缓冲中”
}
});
video.addEventListener('playing', () => {
hideLoadingIndicator();
});
轻量级缓冲 UI 实现建议
不需要复杂库，用一个 <div> 配合 CSS 动画就能表达“正在加载”。重点是控制显隐逻辑，而不是动效本身。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>用 <code>pointer-events: none 确保加载遮罩不阻挡视频操作
progress 事件里高频更新 DOM，它可能每秒触发十几次；改用 requestAnimationFrame 节流waiting 可能延迟触发或丢失seeking 事件后重置缓冲状态，否则拖拽后仍显示“缓冲中”缓冲状态不是非黑即白的标记，而是对用户预期的实时响应。最易忽略的是：不同网络环境（如 2G vs WiFi）、不同 CDN 缓存策略、甚至服务端 Accept-Ranges 响应头是否开启，都会影响 buffered 的表现和事件触发时机。
