video 无法直接通过 networkstate 判断“是否加载中”，但可监听 loadstart 和 progress 事件并结合 networkstate === 2（network_loading）来可靠检测；初始为 1（idle），触发 loadstart 后通常变为 2，progress 持续期间保持该状态。
Video 标签本身没有直接的 networkState 属性可“判断是否处于加载中”，但可以通过监听 networkState 值的变化，并结合其含义来间接推断加载状态。
networkState 的取值及含义
video.networkState 是只读属性，返回一个数字，对应以下常量（定义在 HTMLMediaElement 接口上）：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
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"></source></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
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
