替代海报，当未找到视频src时 [英] Alternate poster when video src not found

问题描述

我在表格中放置了一些视频，供我的网站下载媒体。无论是否有文件src，我都会将视频留在表格中。我想让视频放在一个名为 video1 的文件夹中，使用名为 video1.mp4 。他们还将他们的文件放入视频的海报中，名为 video1.jpg 。这将在与文件 video2 ， video3 等增加的文件夹中重复。

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

 < td> 
< video width =312height =175controls> 
< source src =/ videos / video1 / video1.mp4type =video / mp4>您的浏览器不支持
视频标签。 
< / video> 
< a href =/ videos / video1 / video1.mp4download =video1>下载此影片< / a> 
< / td> 
  

解决方案

您可以将事件侦听器添加到所有视频检查是否发生错误。然后，如果这是视频未正确加载导致的错误（代码3或4，在这里查看可能的错误代码），添加无内容徽标而不是视频。

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

  var vids = document.querySelectorAll（video）; // for all （var x = 0; x< vids.length; x ++）{//添加侦听错误的事件vids [x] .addEventListener（'error'，function（e）{//如果错误是由视频不加载导致if（this.networkState> 2）{//添加一个图像的消息video not foundthis.setAttribute（poster，http://dummyimage.com/312x175/000 /fff.jpg&text=Video+Not+Found）;}}，true ）;}  

< video width =312height =175控件> < source src =http://www.w3schools.com/html/mov_bbb.mp4type =video / mp4/>您的浏览器不支持视频标签。< / video>< video width =312height =175controls> < source src =NON_EXISTING_VIDEO.mp4type =video / mp4/> < / video>

您也可以在 JSFiddle 上看到它。

作为建议，不要在每个文件夹中放置无内容图像，最好在同一个地方只放置一个图像（除非您希望为每个视频制作个性化的无内容图像）。

I have some videos in a table that I'm putting on my site for media outlets to download. I leave the videos in the table regardless if there's a file src. I want to make it super easy for the guys in the field to drop a video in a folder called video1 with a MP4 named video1.mp4. They will also put their file for the poster of the video called video1.jpg. This will repeat in folders incrementing along with the files video2, video3, etc.

I want to put in each folder a jpg with a no content logo on it so when there isn't a file in the video target folder, the poster of no content displays. Here's the code for the individual cell in the 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>

解决方案

You can add an event listener to all the videos that checks if any error occurred. Then if it's an error caused by the video not being loaded correctly (codes 3 or 4, see the possible error codes here), add the "no content" logo instead of the video.

Something like this (one video is valid, the other one is not):

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>

You can also see it on this JSFiddle.

As a recommendation, instead of having a "no content" image in each folder, it would be better to have only one image in a common place (unless you want to have a personalized "no content" image for each video).

这篇关于替代海报，当未找到视频src时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！