readystate 是 video 元素反映资源加载状态的只读属性，取值 0–4：0（无信息）、1（有元数据）、2（可渲染当前帧）、3（可播放一小段）、4（缓冲充足）。需监听 readystatechange 事件，并结合 networkstate、canplay 等事件综合判断可播放性。
readyState 是 <video></video> 元素的一个只读属性，用于反映浏览器对视频资源的加载和准备状态。它不表示是否“已播放”，而是说明当前资源**加载到了哪一步、能否开始播放或进一步操作**。理解它的取值逻辑，能帮你合理控制播放行为、优化用户体验（比如避免点击即报错、提前显示加载提示等）。
readyState 的四个可能值及其含义
该属性返回一个整数（0–4），每个值对应明确的资源准备阶段：
-
0（HAVE_NOTHING）：尚未获取任何媒体信息，
src未设置或设置失败，无法获取时长、尺寸等基本信息； - 1（HAVE_METADATA）：已成功加载元数据（如时长、宽高、音轨数），但尚未加载足够帧以播放；
- 2（HAVE_CURRENT_DATA）：当前播放位置的数据已就绪，可渲染当前帧（例如暂停状态下拖动到某时间点后满足此状态）；
-
3（HAVE_FUTURE_DATA）：当前及后续若干帧数据已加载，可流畅播放一小段时间（通常意味着可调用
play()不会立即中断）； - 4（HAVE_ENOUGH_DATA）：缓冲充足，浏览器认为可以持续播放而无需等待（但不保证全程不卡）。
如何监听 readyState 变化
readyState 是动态变化的，不能仅靠初始化时读取一次。常用方式是监听 readystatechange 事件：
const video = document.querySelector('video');
video.addEventListener('readystatechange', () => {
console.log('当前 readyState:', video.readyState);
if (video.readyState >= 2) {
// 至少能显示当前帧，可安全设置 currentTime 或显示封面
}
if (video.readyState >= 3) {
// 可尝试自动播放或启用播放按钮
}
});
注意：readystatechange 在资源加载过程中可能触发多次，且不同浏览器对触发时机略有差异。不要在其中反复调用 play()，避免被策略拦截。
结合其他属性与事件更可靠地判断“可播放”
单靠 readyState 并不足以确认用户能立即播放，还需配合：
-
networkState：确认不是NETWORK_NO_SOURCE（无有效源）或NETWORK_EMPTY（加载中断）； -
canPlay/canplaythrough事件：比轮询readyState更推荐。例如：video.addEventListener('canplay', () => { /* 已有足够数据播放第一帧 */ });video.addEventListener('canplaythrough', () => { /* 浏览器预估可不中断播完 */ }); -
检查
duration是否为NaN：若为NaN，即使readyState === 1，也说明元数据加载异常（常见于跨域未配 CORS 或格式不支持）。
实际应用中的典型判断逻辑
例如实现“加载完成即自动播放（若允许）”：
const video = document.querySelector('video');
<p>// 先监听元数据就绪，避免 duration 为 NaN
video.addEventListener('loadedmetadata', () => {
if (video.duration === Infinity || isNaN(video.duration)) {
console.warn('视频时长不可用，可能加载异常');
return;
}
});</p><p>// 再监听可播放信号
video.addEventListener('canplay', () => {
if (video.readyState >= 3 && video.networkState === video.NETWORK_LOADED) {
video.play().catch(e => console.log('自动播放被阻止:', e));
}
});</p>
这种组合判断比单纯依赖 readyState === 4 更健壮，尤其在弱网、移动端或策略限制场景下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
