HTML | DOM 视频 networkState 属性

在 HTML5 的 Video API 中，networkState 属性表示当前视频的网络状态。它是只读属性，可以返回如下值之一：

• 0: 表示视频尚未初始化。
• 1: 表示视频已经建立了网络连接并且正在下载数据。
• 2: 表示网络下载已暂停。
• 3: 表示网络下载已停止。
• 4: 表示网络下载失败。

这个属性对于检查视频的网络状态非常有用。我们能够根据不同的状态采取相应的操作，比如在视频下载失败时给出报错提示或者显示进度条。

下面是一个使用 networkState 属性的示例：

<video src="example.mp4" id="myVideo"></video>
<script>
  var myVideo = document.getElementById('myVideo');
  if (myVideo.networkState === myVideo.NETWORK_NO_SOURCE) {
    console.log('视频未初始化');
  }
  myVideo.addEventListener('loadstart', function() {
    console.log('开始下载视频');
  });
  myVideo.addEventListener('waiting', function() {
    console.log('暂停下载视频');
  });
  myVideo.addEventListener('playing', function() {
    console.log('恢复下载视频');
  });
  myVideo.addEventListener('stalled', function() {
    console.log('视频下载停止');
  });
  myVideo.addEventListener('error', function() {
    console.log('视频下载失败');
  });
</script>

这段代码定义了一个 video 元素，并对其绑定了若干事件监听器，用于检查视频的网络状态。在页面加载后，我们可以打开控制台，观察事件监听器输出的信息，并根据它们做出响应。

总之，使用 networkState 属性可以大大简化我们对视频下载状态的监控工作，使得我们能够更方便地调试并处理问题。