video 元素触发 error 事件的典型原因包括 URL 返回 404/403、跨域拒绝、MIME 类型错误、格式不支持及网络中断；error 事件仅在加载阶段触发，解码失败通常静默处理。
video 元素触发 error 事件的典型原因
video 标签加载失败时，浏览器不会自动抛出异常，但会触发 error 事件，并把 video.error 设为非 null 对象。常见原因包括：
- 视频 URL 返回 404、403 或跨域拒绝（CORS）响应
- 服务器返回了非视频 MIME 类型（如
text/html） - 视频格式不被当前浏览器支持（例如 Safari 不支持
webm，IE 不支持mp4H.265 编码） - 网络中断或请求被拦截（如广告屏蔽插件阻断了 CDN 域名）
注意：error 事件只在资源加载阶段触发，播放中解码失败（如损坏帧）通常静默失败，不会再次触发该事件。
监听 video.error 并区分错误类型
video.error 是一个 MediaError 实例，其 code 属性可取 1–4 四个值：
-
1：MEDIA_ERR_ABORTED（用户主动中止） -
2：MEDIA_ERR_NETWORK（网络错误，如 4xx/5xx、连接超时） -
3：MEDIA_ERR_DECODE（媒体解码失败，常见于编码不兼容或文件损坏） -
4：MEDIA_ERR_SRC_NOT_SUPPORTED（src或source中无浏览器支持的格式）
<video id="myVideo" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
<p><script>
const video = document.getElementById('myVideo');
video.addEventListener('error', () => {
if (!video.error) return;
switch (video.error.code) {
case MediaError.MEDIA_ERR_NETWORK:
console.log('网络加载失败，请检查 URL 或网络状态');
break;
case MediaError.MEDIA_ERR_DECODE:
console.log('视频无法解码，请确认编码格式（H.264/AAC 推荐）');
break;
case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
console.log('所有 source 都不被支持，请补充兼容格式');
break;
}
});
</script>用 canPlayType() 预判格式兼容性
canPlayType() 不是布尔函数，它返回 "probably"、"maybe" 或空字符串。不能直接 if (video.canPlayType(...)) 判断，必须显式比对：
立即学习“前端免费学习笔记（深入）”；
-
video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')比只写'video/mp4'更可靠 - Safari 对 H.265（
hev1）返回""，即使能播；Chrome 对某些 VP9 变体也返回"maybe" - 不要依赖
canPlayType()替代真实加载，它只是启发式预估
实际建议：优先提供 mp4（H.264 + AAC），再 fallback webm（VP9 + Opus），避免仅靠 JS 判断就跳过加载。
排查时绕不开的三个真实检查点
- 检查浏览器开发者工具的 Network 面板：确认视频请求状态码、Response Headers 中的
Content-Type 是否匹配（如 video/mp4），以及是否有 Access-Control-Allow-Origin
- 在终端用
curl -I [video-url] 直接看 HTTP 头，排除 Nginx/Apache 配置遗漏 MIME 类型（需确保 mp4 映射到 video/mp4）
- 用
ffprobe [file.mp4] 检查本地视频编码细节：重点看 codec_name 和 profile（例如 H.264 Main Profile 安全，H.265 Main 10 在多数移动端不可用）
Content-Type 是否匹配（如 video/mp4），以及是否有 Access-Control-Allow-Origin curl -I [video-url] 直接看 HTTP 头，排除 Nginx/Apache 配置遗漏 MIME 类型（需确保 mp4 映射到 video/mp4） ffprobe [file.mp4] 检查本地视频编码细节：重点看 codec_name 和 profile（例如 H.264 Main Profile 安全，H.265 Main 10 在多数移动端不可用） 最容易被忽略的是服务端 MIME 类型配置错误——哪怕视频本身完全正常，只要响应头里是 Content-Type: application/octet-stream，Chrome 就会判定为 MEDIA_ERR_DECODE 而非 MEDIA_ERR_SRC_NOT_SUPPORTED。
