Question

我在桌面上放了一些视频，我正在我的网站上下载媒体。无论是否存在文件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>

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>

如果找不到来源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）导致错误，请添加“无内容”徽标而不是视频。

这样的事情（一个视频有效，另一个视频无效）：

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

作为建议，不要在每个文件夹中都包含“无内容”图像，最好只在一个公共位置放置一个图像（除非您希望每个视频都有一个个性化的“无内容”图像）

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

2 个答案: