HTML5视频加载状态显示方法

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《HTML5视频加载状态显示技巧》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

监听 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 实现建议

不需要复杂库，用一个