如何通过HTML5中Video标签的NetworkState判断当前多媒体是否处于加载中

Video 标签本身没有直接的 networkState 属性可“判断是否处于加载中”，但可以通过监听 networkState 值的变化，并结合其含义来间接推断加载状态。

networkState 的取值及含义

video.networkState 是只读属性，返回一个数字，对应以下常量（定义在 HTMLMediaElement 接口上）：

0（NETWORK_EMPTY）：媒体元素刚创建，尚未初始化，src 未设置或为空 1（NETWORK_IDLE）：已选择资源，但尚未开始下载（例如设置了 src 但未调用 load() 或未自动触发加载） 2（NETWORK_LOADING）：正在下载媒体数据 —— 这就是你关心的“加载中”状态 3（NETWORK_NO_SOURCE）：找不到可用的媒体源（所有 source 都失败）

如何可靠检测“正在加载中”

仅靠单次读取 networkState === 2 不够可靠，因为该状态可能转瞬即逝。推荐方式是：

监听 loadstart 事件 —— 它在浏览器开始加载媒体资源时触发，此时 networkState 通常已为 2 监听 progress 事件 —— 在加载过程中持续触发，说明仍在下载中 配合检查 networkState === 2，可排除已暂停、出错或完成的情况 注意：canplay 或 canplaythrough 触发后，networkState 仍可能是 2（边播边下），所以不能仅靠播放事件退出“加载中”逻辑

实用示例代码

以下代码展示如何响应“加载中”状态并更新 UI：

立即学习“前端免费学习笔记（深入）”；

<video id="myVideo" controls> <source src="video.mp4" type="video/mp4"></video><div id="status">等待加载…</div>

<script>const video = document.getElementById(‘myVideo’);const statusEl = document.getElementById(‘status’);const updateLoadingStatus = () => { if (video.networkState === 2) { statusEl.textContent = ‘正在加载中…’; } else if (video.readyState > 0) { statusEl.textContent = ‘已加载部分/可播放’; } else if (video.networkState === 3) { statusEl.textContent = ‘加载失败：无可用资源’; }};// 初始检查updateLoadingStatus();// 关键事件监听video.addEventListener(‘loadstart’, () => { statusEl.textContent = ‘开始加载…’;});video.addEventListener(‘progress’, updateLoadingStatus);video.addEventListener(‘suspend’, updateLoadingStatus); // 如用户暂停、网络中断等video.addEventListener(‘error’, () => { statusEl.textContent = ‘加载出错’;});</script>

注意事项

networkState 不会实时反映缓冲进度，它只表示网络连接层面的状态（空闲、加载、失败等） 移动端或节电模式下，progress 可能不频繁触发，建议搭配 timeupdate 或定时轮询 buffered 范围做补充判断 使用 preload="none" 时，networkState 默认为 1，需手动调用 load() 才会进入 2 不要依赖 networkState 判断“是否加载完成”，应使用 loadeddata、canplay 或 readyState === 4