HTML5多媒体元素NetworkState属性监控网络状态-H5教程-PHP中文网

networkstate属性反映html5媒体元素的网络加载状态而非设备连通性，取值为0–3分别表示空闲、待加载、加载中、无可用源；需通过事件监听或轮询获取变化，不可直接监听。

html5多媒体元素networkstate属性监控网络状态

HTML5 的 <audio></audio> 和 <video></video> 元素提供了 networkState 属性，用于反映当前媒体资源的网络加载状态。它不是实时监听网络连通性（如是否断网），而是描述浏览器与媒体资源之间的连接和数据获取进展。

该属性返回一个整数，对应以下常量（定义在元素实例上）：

NETWORK_EMPTY (0)：元素刚创建，尚未调用 load() 或未设置 src，也未开始任何加载行为。
NETWORK_IDLE (1)：已设置 src 或调用过 load()，但尚未开始加载；或加载被暂停/中止后处于空闲状态。
NETWORK_LOADING (2)：正在下载媒体数据（包括首次加载、缓冲恢复、seek 后重新拉流等）。
NETWORK_NO_SOURCE (3)：已尝试加载所有 <source></source>，但均失败（如 404、CORS 拒绝、格式不支持），且无可用资源。

注意：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> 尝试完毕且全部失败；若只有一个 source 且 404，会进入该状态；若未设 src 也未用 <source></source>，则保持 NETWORK_EMPTY。

单靠 networkState 不足以构建完整错误恢复逻辑。推荐组合使用：

监听 error 事件，再检查 networkState 和 error.code（如 MEDIA_ERR_NETWORK）确认是网络问题。
在 stalled 事件中检查 networkState === NETWORK_LOADING 且 buffered.length === 0，可推测卡在首帧加载，适合提示“正在连接…”。
切换清晰度或源地址后，手动调用 load()，再监听 loadstart，此时 networkState 会从 NETWORK_IDLE 进入 NETWORK_LOADING，可用于 UI 状态同步。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！