如何为不存在的HTML Video源提供无JavaScript回退文本？

纯HTML没有原生且可靠的方式实现视频源文件不存在时的自定义回退文本——<video>标签的子元素仅在浏览器不支持该标签本身时才会显示，无法覆盖源文件加载失败（如404、网络错误）的场景。

如果一定要尽量避免JavaScript，可以尝试以下两种兼容性有限的变通方案：

方案1：使用<object>标签替代<video> #

利用<object>的资源加载失败回退机制，将视频作为<object>的数据源，当源不存在时，部分浏览器会显示<object>内部的自定义文本：

<object type="video/mp4">
  <source src="your-missing-video.mp4" type="video/mp4">
  <p>抱歉，视频文件不存在或无法加载，请检查路径或网络情况。</p>
</object>

注意：不同浏览器表现有差异，部分仍会显示默认错误提示而非自定义文本。

方案2：兜底空白视频+CSS显示文本 #

准备一个体积极小的空白静音视频（如1秒时长），将其作为最后一个<source>。当真实源加载失败时，浏览器会加载空白视频，再通过CSS隐藏视频并显示内部回退文本：

<video controls style="position: relative;">
  <source src="missing-video.mp4" type="video/mp4">
  <source src="blank-silent-video.mp4" type="video/mp4">
  <div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #000; color: #fff; padding: 1rem;">
    视频文件不存在，请确认路径是否正确。
  </div>
</video>

该方案依赖空白视频的正常加载，需少量CSS辅助但无需JavaScript。

补充：可靠方案（需JavaScript） #

如果接受使用JavaScript，可通过监听<video>的error事件实现精准的回退：

<video controls id="targetVideo">
  <source src="missing-video.mp4" type="video/mp4">
  <p>您的浏览器不支持视频播放。</p>
</video>
<script>
  document.getElementById('targetVideo').addEventListener('error', function() {
    this.innerHTML = '<p>视频文件不存在或无法加载，请稍后重试。</p>';
  });
</script>

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