Question

<video controls="controls" poster="http://gifs.gifbin.com/1233925271_8be9acc.gif" style="width:800px;">

以上;在HTML5 <video>标记内，我可以添加海报;一个图像或动画.gif就好了，在播放实际视频之前播放/播放。

现在，我该如何添加图片;特别是.gif（动画.gif适用于海报）将在视频播放后运行？

Answer 1

这是一种直截了当的方式：

<script>
var video = document.querySelector('video');       
video.addEventListener('ended', function() {
  video.load();     
});
</script>

确实在更改视频标记的src时，您隐式调用了load（）。

此方法需要再次请求媒体URL，并且根据缓存设置，它可能会重新下载全长媒体资源，从而导致客户端不必要的网络/ CPU使用。

解决此问题的更合适方法是在视频标记的顶部使用叠加图像/ div，并在视频启动时隐藏它。当结束事件触发时，再次显示叠加图像。

Answer 2

这是我在视频播放结束后看到海报时最终做的事情：

# Show poster at the end of the video
$('video').on('ended',->
  $('video')[0].autoplay=false
  $('video')[0].load()
)

Answer 3

试试这个

var video=$('#video_id').get(0);        
video.play();
video.addEventListener('ended',function(){
    v=video.currentSrc;
    video.src='';
    video.src=v;            
});

Answer 4

简而言之：您需要的是添加video.addEventListener('ended',function() {})并在自定义JavaScript中执行此操作。

以下是在播放视频后重定向的相关帖子，您可以相应地对其进行修改 - Redirect html5 video after play。

参考以查找详细信息：

Answer 5

最后我得到了解决方案：视频将首次自动播放，在视频结束时您将看到海报图片：

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<script type="text/javascript">
 document.observe('dom:loaded', function(evt){
    $('#myVideo').each(function(elm){
        elm.play();
        var wrapper = elm.wrap('span');
        var vid = elm.clone(true);
        elm.observe('ended', function(){
          wrapper.update(vid);
       });
    });
 });
</script>

<video id="myVideo" poster="1.png" >
    <source src="1.mp4" type="video/mp4" />
</video>

Answer 6

这对我有用。

var video=$('#video_id').get(0);        
video.play();
video.addEventListener('ended',function(){
    v=video.currentSrc;
    video.src='';
    video.src=v; 
    video.pause();          
});

Answer 7

我看到了两种解决您的问题的方法。

第一个将在视频结束后将当前帧设置为位置0（第一帧）。您可以设置任何喜欢的框架。建议使用此解决方案。

<video controls id="myVideo" poster="test.jpg">
  <source src="test.mp4" type="video/mp4" />
</video>
<script>
let myVideo = document.getElementById("myVideo");
myVideo.onended = function() {
  myVideo.currentTime = 0;
};
</script>

下一个将重新加载视频源，因此海报将再次出现。根据{{1}}中poster的规范，它只会显示到视频开始播放一次。此后，再次获取海报的唯一方法-重新加载视频video和src，以确保确定。通过poster重新加载，工作会更加稳定。

poster

Answer 8

我有相同的目标，并通过使用jQuery在结束时将视频源重置为自身来找到解决方案。现在我在游戏前后获得了我的GIF动画海报。这是一个简单的javascript播放函数和jQuery代码。

function play()
    {
    movie_ID.play(); 

    $(document).ready(function(){
         $("#movie_ID").bind("ended", function() {
        $('#movie_ID').attr('src', 'movie_ID.src');
            });
         });   
     }

Answer 9

通过在视频本身的末尾添加1个额外的帧（海报）来解决，因为网站不支持插入javascripts

Answer 10

如果您想要一个海报结尾，那就是唯一的要求，那么我想说，只需在视频文件中添加一个结尾帧作为那个海报，然后跳过加载不必要的JS。视频播放完后，您将看到结束帧，现在是您添加的海报。

如果您想在视频末尾显示视频海报，或者换句话说重新加载视频，则使用EL Yusubov上面显示的自定义事件

HTML5视频/视频海报结束

10 个答案: