HTML5 Video请求超时事件：Safari视频加载失败的事件捕获咨询

当然有啦！HTML5的<video>标签早就为这类场景准备了专门的事件处理器，最核心的就是error事件，另外还有几个相关事件能帮你更细致地追踪加载过程中的异常情况。

这是专门用来捕获媒体加载或播放过程中各类错误的事件，包括你遇到的请求超时、资源不存在、格式不支持等情况。当加载失败（比如你提到的“Request timed out”）时，浏览器会立即触发这个事件，你还能通过事件对象获取具体的错误类型，方便针对性处理。

举个实用的代码示例：

<video id="myVideo" src="your-video-source.mp4"></video>

<script>
  const videoElement = document.getElementById('myVideo');
  
  videoElement.addEventListener('error', (event) => {
    const errorObj = event.target.error;
    console.log('视频加载出现错误：');
    
    // 根据错误码判断具体问题
    switch(errorObj.code) {
      case errorObj.MEDIA_ERR_ABORTED:
        console.log('加载操作被用户主动中断');
        break;
      case errorObj.MEDIA_ERR_NETWORK:
        console.log('网络类错误（比如请求超时、资源加载失败）');
        // 你遇到的"Failed to load resource: Request timed out"就属于这类
        break;
      case errorObj.MEDIA_ERR_DECODE:
        console.log('视频解码失败（可能是资源损坏）');
        break;
      case errorObj.MEDIA_ERR_SRC_NOT_SUPPORTED:
        console.log('资源格式不支持或地址无效');
        break;
      default:
        console.log('未知错误');
    }
  });
</script>

除了直接捕获错误的error事件，还有几个事件能帮你在问题发生前或发生时做更细致的处理：

• waiting：当视频因为缓冲数据不足而暂停播放时触发，比如网络过慢导致加载跟不上播放速度，这时候可以给用户显示“正在缓冲，请稍候”的提示，若长时间触发则可能预示后续会出现超时错误。
• stalled：资源加载意外停止时触发（比如网络连接突然中断），这时候可以尝试重新加载资源或提示用户检查网络。
• loadstart：资源开始加载时触发，你可以用它记录加载起始时间，配合error事件实现自定义的超时判断逻辑（不过浏览器本身已经有默认的超时机制，这个更多是满足个性化需求）。

如果想更早捕获加载问题，可以给<video>标签添加preload="auto"属性，让浏览器在页面加载完成后就开始预加载视频资源，这样错误会被更早触发，方便你及时给用户反馈。

内容的提问来源于stack exchange，提问作者user2993497