如何为HTML <video>标签设置视频链接失效时的回退内容？

不用提前发送大量HTTP请求去检测视频状态，直接利用浏览器原生的error事件就能搞定——当视频链接失效、无法加载时，浏览器会自动触发这个事件，我们只需要在事件回调里替换成回退内容即可。

核心实现思路 #

• 监听每个<video>元素的error事件，该事件仅在视频加载失败（比如链接失效、资源不存在）时触发，不会覆盖浏览器支持<video>的正常情况
• 事件触发后，隐藏原视频元素，插入回退图片或提示文本

代码示例（原生JS） #

1. 处理页面已有的静态视频

// 遍历所有video元素，绑定error事件
document.querySelectorAll('video').forEach(video => {
  video.addEventListener('error', function() {
    // 隐藏原视频
    this.style.display = 'none';
    
    // 创建回退容器
    const fallback = document.createElement('div');
    fallback.classList.add('video-fallback');
    // 自定义回退内容，这里用图片+文本举例
    fallback.innerHTML = `
      <img src="/assets/fallback-video.jpg" alt="视频无法访问">
      <p>抱歉，该视频资源已失效</p>
    `;
    
    // 将回退元素插入到原视频的位置
    this.parentNode.insertBefore(fallback, this);
  });
});

2. 处理动态添加的视频（事件委托）

如果页面会动态加载视频，用事件委托可以避免重复绑定：

// 绑定到父容器（这里用body，建议换成更具体的父元素）
document.body.addEventListener('error', function(e) {
  // 确认触发事件的是video元素
  if (e.target.tagName === 'VIDEO') {
    const video = e.target;
    video.style.display = 'none';
    
    const fallback = document.createElement('div');
    fallback.classList.add('video-fallback');
    fallback.innerHTML = `<img src="/assets/fallback-video.jpg" alt="视频失效">`;
    
    video.parentNode.insertBefore(fallback, video);
  }
}, true); // 注意开启捕获阶段，因为error事件部分浏览器不冒泡

样式建议（可选） #

给回退元素加个和原视频一致的样式，避免布局错乱：

.video-fallback {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9比例，和视频一致 */
  position: relative;
  background: #f5f5f5;
}

.video-fallback img, .video-fallback p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

为什么这个方案更优 #

• 无额外HTTP请求：完全依赖浏览器自身的加载检测，不会像批量HEAD请求那样增加服务器压力
• 精准触发：只有视频真的加载失败时才执行回退逻辑，没有冗余操作
• 适配性强：不管是静态还是动态视频都能覆盖，代码量小易维护

内容的提问来源于stack exchange，提问作者David Samir