networkState属性反映HTML5媒体元素的网络加载状态而非设备连通性，取值为0–3分别表示空闲、待加载、加载中、无可用源；需通过事件监听或轮询获取变化，不可直接监听。
HTML5 的 <audio> 和 <video> 元素提供了 networkState 属性，用于反映当前媒体资源的网络加载状态。它不是实时监听网络连通性（如是否断网），而是描述浏览器与媒体资源之间的连接和数据获取进展。
networkState 的取值及含义
该属性返回一个整数，对应以下常量（定义在元素实例上）：
-
NETWORK_EMPTY (0)：元素刚创建，尚未调用
load()或未设置src，也未开始任何加载行为。 -
NETWORK_IDLE (1)：已设置
src或调用过load()，但尚未开始加载；或加载被暂停/中止后处于空闲状态。 - NETWORK_LOADING (2)：正在下载媒体数据（包括首次加载、缓冲恢复、seek 后重新拉流等）。
-
NETWORK_NO_SOURCE (3)：已尝试加载所有
<source>，但均失败（如 404、CORS 拒绝、格式不支持），且无可用资源。
如何监控 networkState 变化
注意：networkState 是只读属性，**没有原生事件**（如 onnetworkstatechange）。需通过轮询或结合其他事件间接感知变化：
- 监听
loadstart、progress、stalled、error、emptied等事件，在回调中读取当前networkState值，判断所处阶段。 - 对关键状态（如从
NETWORK_LOADING变为NETWORK_NO_SOURCE）做主动检查：在error事件触发后，检查networkState === HTMLMediaElement.NETWORK_NO_SOURCE。 - 若需高频率监控（如自定义缓冲指示器），可用
setInterval每 200–500ms 读取一次networkState，但应避免高频轮询影响性能。
常见误用与注意事项
开发者容易混淆 networkState 与其他状态属性：
立即学习“前端免费学习笔记（深入）”；
- 它不反映设备整体网络是否可用（例如 Wi-Fi 关闭时，
networkState仍可能是NETWORK_IDLE，直到你调用play()才触发加载并变为NETWORK_LOADING，随后才可能失败）。 - 不要用它替代
readyState：后者表示媒体数据解析和可播放程度（如是否已有足够帧），而networkState专注“是否在连、连得上否、连得怎样”。 -
NETWORK_NO_SOURCE触发条件严格——必须所有<source>尝试完毕且全部失败；若只有一个 source 且 404，会进入该状态；若未设src也未用<source>，则保持NETWORK_EMPTY。
实用建议：结合 error 和事件做健壮处理
单靠 networkState 不足以构建完整错误恢复逻辑。推荐组合使用：
- 监听
error事件，再检查networkState和error.code（如MEDIA_ERR_NETWORK）确认是网络问题。 - 在
stalled事件中检查networkState === NETWORK_LOADING且buffered.length === 0，可推测卡在首帧加载，适合提示“正在连接…”。 - 切换清晰度或源地址后，手动调用
load()，再监听loadstart，此时networkState会从NETWORK_IDLE进入NETWORK_LOADING，可用于 UI 状态同步。
