找不到视频src时的备用海报

Question

我在网站上放了一些视频，供媒体下载。不管是否有文件src，我都会把视频放在表中。我想让现场的人可以非常容易地将视频放在一个名为video1的文件夹中，并将MP4命名为video1.mp4。他们还将为名为video1.jpg的视频海报提交文件。这将在文件夹中重复，并与文件video2、video3等一起递增。

我想在每个文件夹中放一个带有无内容标志的jpg，这样当视频目标文件夹中没有文件时，就会显示无内容的海报。这是表中单个单元格的代码：

<td>
    <video width="312" height="175" controls>
        <source src="/videos/video1/video1.mp4" type="video/mp4">Your browser does not 
            support the video tag.
    </video>
    <a href="/videos/video1/video1.mp4" download="video1">Download this video</a>
</td>

Answer 1

您可以在所有视频中添加一个事件侦听器，用于检查是否发生任何错误。然后，如果是由于视频未正确加载而导致的错误（代码3或4，请参阅此处可能的错误代码），请添加"无内容"徽标而不是视频。

类似这样的东西（一个视频有效，另一个无效）：

var vids = document.querySelectorAll("video");
// for all the videos in the page
for (var x = 0; x < vids.length; x++) {
  // add an event listening for errors
  vids[x].addEventListener('error', function(e) {
    
    // if the error is caused by the video not loading
    if (this.networkState > 2) {
      
      // add an image with the message "video not found"
      this.setAttribute("poster", "http://dummyimage.com/312x175/000/fff.jpg&text=Video+Not+Found");
    }
  }, true);
}

<video width="312" height="175" controls>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>
<video width="312" height="175" controls>
  <source src="NON_EXISTING_VIDEO.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

你也可以在这个JSFiddle上看到它。

作为一项建议，与其在每个文件夹中都有一个"无内容"的图像，不如在一个公共位置只有一个图像（除非你想为每个视频提供一个个性化的"没有内容"图像）。

Answer 2

您可以使用以下代码实现这一点

<video controls>
  <source src="something.mp4" type="video/mp4"></source>
    <img src="notfound.jpg" alt="Image Not Found">
</video>
<script>
var v = document.querySelector('video'),
    sources = v.querySelectorAll('source'),
    lastsource = sources[sources.length-1];
lastsource.addEventListener('error', function(ev) {
  var d = document.createElement('div');
  d.innerHTML = v.innerHTML;
  v.parentNode.replaceChild(d, v);
}, false);
</script>

如果找不到来源，请查看此处的帖子以了解错误https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Showing_fallback_content_when_no_source_could_be_decoded