视频加载失败需从写起设计三层兜底：格式兼容性、网络/资源、用户交互。按av1/webm→vp9→h.264 mp4顺序排列source，type必写全；onerror依error.code分级响应；首屏preload="none"、弱网降级、stalled预警、ios静音提示及poster与备用内容均不可少。
视频加载失败不是“出错了再补”，而是从写<video></video>那一刻起，就要把降级路径埋进去。核心是三层兜底：格式兼容性兜底、网络/资源兜底、用户可感知的交互兜底。
多按兼容优先级排列
浏览器会按顺序尝试
- 正确示例：
<source src="vid.av1.webm" type="video/webm; codecs=av1"></source><source src="vid.vp9.webm" type="video/webm; codecs=vp9"></source><source src="vid.h264.mp4" type="video/mp4"></source> - type属性必须写全，IE11不识别没type的
，直接跳过 - 避免在
里用相对路径拼接变量，构建时确保所有URL真实存在且返回200
onerror触发后做分级响应
不能只弹个“加载失败”，要结合video.error.code和networkState判断真实原因，再给不同反馈：
- code === 2（网络失败）：显示底部toast + 「重试」按钮，点击执行
video.load(); video.play().catch(() => {}) - code === 3（解码失败）：提示“当前设备暂不支持该编码”，若提供清晰度切换，自动禁用对应档位
- code === 4（格式全不支持）：检查
video.networkState === HTMLMediaElement.NETWORK_NO_SOURCE，说明所有都被跳过，此时可fallback到静态下载链接或引导更新浏览器 - code === 1（用户中止）：不提示，仅上报日志——比如用户切页、关标签，无需打扰
弱网与首屏关键场景主动降级
等报错再处理已晚。对首屏视频，建议默认preload="none"，等用户点击播放再手动load()；对非首屏视频，用loading="lazy"配合IntersectionObserver，进入视口后再加载。
- 检测弱网：
navigator.connection?.effectiveType为'2g'/'3g'时，提前切换至低清MP4源 - 首帧卡顿预警：监听
stalled事件，若持续超3秒且buffered.length === 0，视为加载失败，触发重试逻辑 - iOS Safari静音拦截：若
readyState === 0 && paused === true，提示“请手动点击播放并允许声音”
备用内容与视觉兜底不可少
<video></video>标签内的文字内容不是摆设，它是无JS、无CSS、甚至无现代浏览器时的最后防线。
- 写明降级动作，例如：
<p>视频无法播放？@#@#@#@#@#@#@#@#@#@0</p> - 设置
poster属性，指向一张轻量占位图（建议≤10KB），避免黑屏空白 - 动态创建的
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
