视频加载失败需分层降级：先验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测试优化策略权重
降级不是层层递进的“备用方案”，而是基于实时信号的主动适配。关键在把错误分类转化为可执行动作，同时不让用户感知技术决策过程。
