networkState 是 HTMLMediaElement 接口的只读属性，video 和 audio 元素均继承它，返回 0–3 整数：0=NETWORK_EMPTY（未初始化），1=NETWORK_IDLE（已选资源但空闲），2=NETWORK_LOADING（正在下载），3=NETWORK_NO_SOURCE（无可用源）。
Video 标签本身没有 networkState 属性，这是个常见误解。networkState 是 HTMLMediaElement 接口定义的只读属性，所有媒体元素（包括
理解 networkState 的四个可能值
networkState 返回一个整数，对应以下常量（定义在 HTMLMediaElement 接口上）：
- 0（NETWORK_EMPTY）：媒体元素刚创建，尚未调用 load() 或未设置 src，无网络活动
- 1（NETWORK_IDLE）：已加载元数据（如时长、尺寸），暂无数据请求，处于空闲等待状态（常见于 preload="metadata" 且未播放时）
- 2（NETWORK_LOADING）：正在下载媒体数据（缓冲中），例如播放开始后持续拉流、seek 后重新加载片段、或低网速下反复触发加载
-
3（NETWORK_NO_SOURCE）：找不到任何可用源（src 为空、所有
都失败、MIME 类型不支持等）
监听 networkState 变化的关键方法
networkState 是只读快照，不会自动触发事件。要实现“诊断”，必须轮询或结合其他事件间接感知变化：
- 使用 readystatechange 事件：当 readyState 改变时，networkState 往往同步更新（如从 NETWORK_IDLE → NETWORK_LOADING）
- 监听 loadstart、progress、stalled、error 等网络相关事件，它们比单纯查 networkState 更具诊断意义
- 定时轮询（谨慎使用）：
setInterval(() => console.log(video.networkState), 1000)，适合调试，但生产环境建议优先用事件驱动
实用诊断示例：识别卡顿与加载异常
仅看 networkState 值不够，需结合上下文判断问题：
- 若长时间保持 NETWORK_LOADING 且
buffered.end(0) - video.currentTime持续很小 → 缓冲不足，可能网速慢或服务器响应慢 - 若反复出现 NETWORK_IDLE → NETWORK_LOADING 切换，且伴随
stalled事件 → 网络抖动或 CDN 节点不稳定 - 若始终为 NETWORK_NO_SOURCE → 检查 src 是否合法、CORS 头是否正确、MIME 类型是否匹配（尤其 HLS/DASH 场景需 server 支持 .m3u8/.mpd）
- 若为 NETWORK_EMPTY 但已设 src → 可能元素未挂载完成，或 src 被 JS 动态赋值后未调用
video.load()
配合其他属性提升诊断能力
networkState 必须和其他媒体属性联动才有诊断价值：
- readyState：反映内容加载进度（HAVE_NOTHING → HAVE_FUTURE_DATA），与 networkState 协同可区分“没开始连”和“连上了但没数据”
- buffered：查看已缓存的时间范围，验证 NETWORK_LOADING 是否有效推进
- seeking / seeking：seek 过程中 networkState 通常变为 NETWORK_LOADING，完成后应回到 NETWORK_IDLE；若卡住，说明 seek 请求失败
- video.error：当 networkState === NETWORK_NO_SOURCE 时，error.code 和 error.message 提供具体失败原因
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
