HTML5视频资源加载失败之分级降级与补救措施

视频加载失败需分层降级：先验URL与网络，再试格式兼容，继而适配弱网，最后提供手动干预，全程记录性能数据优化策略。

视频加载失败时，不能只靠一句“加载失败，请重试”应付用户。有效的降级策略应分层应对：从资源可恢复性、格式兼容性、网络环境到终端能力逐级判断，并提供对应补救动作。

第一级：检查资源URL与基础可访问性

多数失败源于链接失效、跨域限制或服务端返回非200响应。需在error事件中确认video.error的code值（如MEDIA_ERR_SRC_NOT_SUPPORTED或MEDIA_ERR_NETWORK），而非仅监听onerror冒泡事件。

• 对MEDIA_ERR_NETWORK：立即尝试用fetch()发起轻量HEAD请求验证URL是否可达，避免直接重播
• 若返回403/401：提示用户登录过期，跳转至登录页并保留当前视频上下文
• 若DNS或连接超时：记录日志并触发本地缓存回退（如有）

第二级：格式与编解码兼容性降级

同一视频源可能提供多种格式（MP4/H.264、WebM/VP9、AV1），但浏览器支持不一。不应依赖canPlayType()静态判断，而应在loadedmetadata前动态试探。

• 按优先级顺序设置source元素：av1.webm → vp9.webm → h264.mp4
• 当canPlayType('video/webm; codecs="av1"')返回"probably"才启用AV1源；若返回空字符串，跳过该source并移除其src属性防止干扰
• 对老旧iOS设备（Safari ≤ 14），主动禁用WebM源，避免触发无效加载阻塞

第三级：网络条件驱动的自适应回退

弱网环境下，高码率视频易卡顿或中断。可在stalled或waiting持续超2秒时启动带宽评估。

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

• 结合NetworkInformation.effectiveType（如'2g'或'slow-2g'）切换至低清MP4源（如360p@500kbps）
• 无Network API支持时，用首帧加载耗时+缓冲区长度估算：若video.buffered.end(0) 且<code>video.duration > 0，视为缓冲不足，触发降码率
• 降级后显示轻量提示：“已切换至流畅模式”，不打断播放流程

第四级：终端能力兜底与用户干预入口

当所有自动策略失效（如全格式加载失败、硬件解码被禁、DRM许可异常），需提供明确可控的补救路径。

• 展示“手动选择清晰度”按钮，列出当前可用源（含格式标识，如“MP4（H.264）”、“WebM（VP9）”）
• 内置“复制视频地址”功能，方便用户粘贴到外部播放器（如VLC）验证是否为前端问题
• 对移动端，增加“下载离线观看”选项（若服务端支持范围请求且视频≤200MB）
• 所有降级操作均记录performance.mark()和错误类型，用于后续AB测试优化策略权重

降级不是层层递进的“备用方案”，而是基于实时信号的主动适配。关键在把错误分类转化为可执行动作，同时不让用户感知技术决策过程。