HTML视频播放失败怎么捕获错误：addEventListener监听error事件
在网页开发中，使用<video>标签嵌入视频是很常见的需求，但视频加载和播放过程中可能会因为路径错误、格式不支持、网络异常等问题导致播放失败。这时候我们需要捕获这些错误，给用户友好的提示或者做后续的错误处理，最常见的方式就是通过addEventListener监听error事件来实现。
video标签的error事件基础
<video>元素本身支持error事件，当视频加载、解码或者播放过程中出现错误时，就会触发这个事件。我们可以通过addEventListener给video元素绑定error事件的回调函数，在回调里获取错误相关信息。
video元素的error属性是一个MediaError对象，里面包含了错误的详细信息，其中最常用的是code属性，不同的code值代表不同的错误类型：
- 1：用户主动终止了视频的获取（比如手动停止加载）
- 2：网络错误导致视频无法加载
- 3：视频解码失败，可能是格式不支持或者文件损坏
- 4：视频的地址无效，或者视频资源不存在
完整示例代码
下面的代码演示了如何给video元素绑定error事件，捕获播放错误并分类处理：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频错误捕获示例</title>
<style>
.error-tip {
color: #ff4d4f;
margin-top: 10px;
padding: 8px;
background-color: #fff2f0;
border-radius: 4px;
display: none;
}
</style>
</head>
<body>
<!-- 视频元素，这里故意写错误的视频地址模拟加载失败 -->
<video
id="myVideo"
width="640"
height="360"
controls
preload="auto"
>
<source src="wrong-video-path.mp4" type="video/mp4">
您的浏览器不支持video标签
</video>
<!-- 错误提示区域 -->
<div class="error-tip" id="errorTip"></div>
<script>
// 获取video元素和错误提示元素
const videoEl = document.getElementById('myVideo');
const errorTipEl = document.getElementById('errorTip');
// 监听video的error事件
videoEl.addEventListener('error', function(e) {
// 获取错误对象
const error = videoEl.error;
let errorMsg = '视频播放出现未知错误';
// 根据错误code判断错误类型
if (error) {
switch(error.code) {
case 1:
errorMsg = '您已手动停止视频加载';
break;
case 2:
errorMsg = '网络错误，无法加载视频资源';
break;
case 3:
errorMsg = '视频解码失败，可能是格式不支持或文件损坏';
break;
case 4:
errorMsg = '视频地址无效，未找到对应的视频资源';
break;
default:
errorMsg = `视频播放错误，错误代码：${error.code}`;
}
}
// 显示错误提示
errorTipEl.textContent = errorMsg;
errorTipEl.style.display = 'block';
// 也可以在这里做其他错误处理，比如上报错误日志
console.error('视频播放错误：', errorMsg, '原始错误信息：', error);
});
// 额外监听source元素的error事件，处理多source的情况
const sourceEls = videoEl.querySelectorAll('source');
sourceEls.forEach(sourceEl => {
sourceEl.addEventListener('error', function(e) {
console.log('单个视频源加载失败，地址：', sourceEl.src);
// 可以在这里切换备用视频源
});
});
</script>
</body>
</html>代码说明
上面的示例中，我们首先定义了一个<video>元素，故意设置了一个错误的视频地址来模拟加载失败的场景。然后通过getElementById获取到video元素和用于显示错误提示的div元素。
核心的逻辑是给video元素绑定error事件监听器，当error事件触发时，从video元素的error属性中获取MediaError对象，再根据code属性的值判断具体的错误类型，生成对应的错误提示信息，最后把提示信息显示到页面上。
另外我们还额外给每个<source>标签绑定了error事件，如果你的视频配置了多个不同格式的source源，可以在这个事件里做备用源的切换，比如第一个mp4格式加载失败，就尝试加载webm格式的源。
注意事项
1. error事件的触发时机：不仅视频地址错误会触发，视频播放过程中解码失败、网络中断等情况也会触发，所以error事件可以覆盖大部分播放相关的错误场景。
2. 错误信息的展示要友好：不要直接把技术性的错误代码展示给普通用户，最好翻译成通俗易懂的提示，比如把“code 4”翻译成“未找到视频资源，请检查链接是否正确”。
3. 如果需要上报错误日志，可以在error回调里把错误的详细信息（包括code、视频地址、当前时间等）发送到后端，方便后续排查问题。
4. 如果页面中有多个video元素，可以封装一个统一的错误监听函数，避免重复写相同的逻辑。