MediaError 接口本身不提供主动捕获错误的机制，它只在 <audio> 或 <video> 元素触发 error 事件时作为事件对象的 error 属性值存在；需为每个媒体元素单独监听 error 事件，通过 video.error.code 获取错误码：1 表示用户中止，2 表示网络错误，3 表示解码失败，4 表示格式不支持。
MediaError 接口本身不提供主动捕获错误的机制，它只在 <audio> 或 <video> 元素触发 error 事件时，作为事件对象的 error 属性值存在。关键在于监听元素的 error 事件，并从中读取 error.code。
监听 media 元素的 error 事件
必须为每个音视频元素单独绑定 error 事件监听器，不能依赖全局或 document 级别监听：
- 错误发生时，浏览器会同步触发该元素上的
error事件（注意：不是所有加载失败都会触发，例如 CORS 拒绝、跨域资源不可读可能静默失败或触发其他事件如stalled） - 需确保监听器在设置
src之前或之后立即注册，避免错过异步加载初期的错误 - 示例写法：
<video id="myVideo"></video>
<script><br>const video = document.getElementById('myVideo');<br>video.addEventListener('error', (e) => {<br> if (video.error) {<br> console.log('错误代码:', video.error.code);<br> }<br>});<br>video.src = 'broken.mp4'; // 触发加载<br></script>
理解并区分 MediaError.code 的五种标准值
error.code 是只读数字，对应规范定义的五种情形（HTML Living Standard），实际中常见的是前三种：
-
1（MEDIA_ERR_ABORTED）：用户主动中止加载（如调用
load()后立刻pause()或导航离开） - 2（MEDIA_ERR_NETWORK）：网络错误导致获取资源失败（如 404、连接超时、DNS 失败）。这是最常见的加载失败原因
- 3（MEDIA_ERR_DECODE）：资源已成功下载，但解码器无法解析（如格式不支持、文件损坏、编码参数超出浏览器能力）
- 4（MEDIA_ERR_SRC_NOT_SUPPORTED）：资源地址本身无问题，但浏览器明确不支持该 MIME 类型或编码（如尝试播放 AV1 视频在旧版 Safari 上）
- 0（未定义）：规范未定义，实践中极少出现，通常表示 error 对象存在但 code 未被正确设置
结合 readyState 和网络调试做交叉判断
仅靠 error.code 不足以定位根本原因，需配合其他信号：
立即学习“前端免费学习笔记（深入）”；
- 检查
video.networkState：若为NETWORK_NO_SOURCE（0）说明无有效 src；NETWORK_LOADING（1）或NETWORK_IDLE（2）时出错更倾向网络或解码问题 - 观察
video.readyState：始终为 0 表示根本未开始加载，可能是 CORS、MIME 类型错误或服务器拒绝响应；若曾升到 1 或更高后回落，更可能是解码失败 - 打开浏览器开发者工具的 Network 面板：确认请求是否发出、状态码是否异常、响应头是否含
Content-Type、是否存在Cross-Origin-Resource-Policy拦截
实用错误处理建议
不要只显示“播放失败”，应按 code 提供差异化反馈和恢复路径：
- code === 2（网络错误）：提示“网络不稳定，请检查连接”，可自动重试一次（
video.load(); video.play();） - code === 3（解码失败）：提示“当前设备暂不支持该视频格式”，可切换备用源（
<source>标签）或降级为 GIF/图片占位 - code === 4（格式不支持）：提前通过
video.canPlayType('video/mp4; codecs="avc1.42E01E"')检测，避免加载已知不兼容资源 - 所有情况都应记录日志（含 code、URL、userAgent），便于后续分析错误分布
