找不到视频源时的备用海报答案

【问题标题】：Alternate poster when video src not found找不到视频源时的备用海报
【发布时间】：2015-11-21 03:00:54
【问题描述】：

我有一些视频放在我的网站上，供媒体下载。无论是否有 src 文件，我都会将视频留在表格中。我想让该领域的人非常容易将视频放入名为 video1 的文件夹中，并使用名为 video1.mp4 的 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>

【问题讨论】：

请具体说明问题。
我想知道如果源文件夹中没有视频，我可以在上面的代码中添加什么来显示无内容 jpg 而不是默认海报。对此感到抱歉。

标签： javascript html video tags

【解决方案1】：

您可以为所有视频添加事件侦听器，以检查是否发生任何错误。然后如果是视频没有正确加载导致的错误（代码3或4，see the possible error codes here），添加“无内容”标志而不是视频。

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

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看到它。

作为建议，与其在每个文件夹中放置“无内容”图像，不如在公共位置仅放置一个图像（除非您希望为每个视频提供个性化的“无内容”图像） .

【讨论】：

【解决方案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，请查看此处的帖子以了解后备情况@

【讨论】：