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

Question

我在 table 中有一些视频放在我的网站上，供媒体下载。无论是否有文件 src，我都会将视频留在 table 中。我想让该领域的人非常容易地将视频放入名为 video1 的文件夹中，并使用名为 video1.mp4 的 MP4。他们还将把他们的文件用于名为 video1.jpg 的视频的海报。这将在随着文件 video2、video3 等

递增的文件夹中重复

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

<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

您可以使用以下代码实现此目的

<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>

如果找不到源，请在此处查看 post 以了解后备方案 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Showing_fallback_content_when_no_source_could_be_decoded

Answer 2

您可以为所有视频添加一个事件侦听器，以检查是否发生任何错误。那么如果是视频加载不正确导致的错误（代码 3 或 4，see the possible error codes here），请添加 "no content" 徽标而不是视频。

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

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

作为一个建议，与其在每个文件夹中放一张 "no content" 图片，不如在一个公共位置只放一张图片（除非你想有一张个性化的 "no content" 图片每个视频）。

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

Alternate poster when video src not found

html

javascript

tags

video