ReadyState是audio/video元素反映浏览器对媒体数据掌握程度的只读属性，取值0–4分别表示无信息、有元数据、有当前数据、有未来数据、缓冲充足，需结合loadedmetadata/canplay/canplaythrough等事件判断播放时机。
ReadyState 是 HTML5 和 元素的只读属性，用于反映媒体资源当前的加载状态和是否具备播放条件。它不表示“是否已加载完成”，而是描述“**浏览器对媒体数据的掌握程度**”，直接影响能否调用 play()、是否触发 canplay 或 canplaythrough 事件。
ReadyState 的四个取值及实际含义
该属性返回一个整数（0–4），对应五个常量（部分浏览器支持符号常量，但兼容性起见建议用数值判断）：
-
0（HAVE_NOTHING）：尚未获取任何媒体信息。可能刚创建元素、
src为空，或加载被中止/失败。此时调用play()会静默失败。 -
1（HAVE_METADATA）：已获取时长、尺寸、轨道等元数据，但尚无足够数据解码首帧。可安全读取
duration、videoWidth等，但还不能播放。 -
2（HAVE_CURRENT_DATA）：已有当前播放位置所需的数据（如当前帧图像、音频采样），可渲染/播放当前时刻，但未必能持续播放。例如缓冲区仅够播放1秒，
readyState可能为 2，但很快降回 1。 -
3（HAVE_FUTURE_DATA）：有足够数据播放当前时刻，并至少能解码后续若干帧（通常意味着可流畅播放几秒）。此时触发
canplay事件，是调用play()的较稳妥时机。 -
4（HAVE_ENOUGH_DATA）：缓冲区充足（由
media.buffered.end(0)与media.duration比较决定），预期可播放至结束无需等待。触发canplaythrough事件，适合自动播放或关键交互场景。
如何结合事件监听做可靠判断
仅轮询 readyState 效率低且不可靠。应优先监听事件，再按需检查状态：
- 监听
loadedmetadata：确保元数据就绪，可读取duration、设置初始currentTime。 - 监听
canplay：表示可开始播放（readyState ≥ 3），适合用户点击“播放”后立即调用play()。 - 监听
canplaythrough：表示缓冲充分（readyState === 4），适合需要无缝播放的场景（如背景音乐、教学视频）。 - 注意：网络波动可能导致
readyState在 3↔2 间变化，此时会触发waiting和playing事件，而非重新触发canplay。
常见误判与规避建议
以下做法易导致播放失败或体验异常：
-
在
DOMContentLoaded或load后立刻调用play()：此时readyState很可能为 0 或 1，尤其在未设置preload时。 -
仅判断
readyState === 3就认为可自动播放：移动端多数浏览器要求用户手势触发，否则play()被拒绝，与readyState无关。 -
忽略
stalled和progress事件：当readyState为 2 或 3 但网络卡顿时，需监听这些事件提示加载中或降级处理。 - 推荐写法：
video.addEventListener('canplay', () => {<br> if (video.readyState >= 3) video.play().catch(e => console.warn('Auto-play prevented:', e));<br> });
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
