Javascript 如何在视频播放结束时显示html5视频海报？_Javascript_Jquery_Html_Html5 Video

Javascript 如何在视频播放结束时显示html5视频海报？

javascript jquery html

Javascript 如何在视频播放结束时显示html5视频海报？,javascript,jquery,html,html5-video,Javascript,Jquery,Html,Html5 Video,我想在播放后播放视频海报。我尝试以下代码，但没有运气 var video=$('#cms_video').get(0); video.play(); video.addEventListener('ended',function(){ this.posterImage.show(); }); 试着给你的海报一个id或类，然后你可以做： var video=$('#cms_video').get(0); video.play(); video.addEventListener('en

我想在播放后播放视频海报。我尝试以下代码，但没有运气

var video=$('#cms_video').get(0);
video.play();
video.addEventListener('ended',function(){
    this.posterImage.show();
});

试着给你的海报一个

id

或类，然后你可以做：

var video=$('#cms_video').get(0);
video.play();
video.addEventListener('ended',function(){
    $('#poster').show();
    // ^ Use . here if you apply class instead of if for your poster 
});

最后，我通过以下代码实现了我的目标

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

仅在视频结束时，显示一个具有海报相同src的div（具有较高的z索引或隐藏视频）

如果需要重播视频，请在显示的div上绑定一个click事件（以切换可见性和重播）

一种更简单的方法：

<script type="text/javascript">
var video= $('#cms_video').get(0);       
video.addEventListener('ended',function(){
    video.load();     
},false);
</script>


var video=$（'cms_video'）.get（0）；
video.addEventListener（'end'，function（）{
video.load（）；
}，假）；

这是loganphp答案的快捷方式。实际上，在更改视频标记的src时，您会隐式地对其调用load（）

此方法有再次请求媒体URL的警告，根据缓存设置，它可能会重新下载全长媒体资源，从而导致客户端不必要的网络/CPU使用。但它仍然以loganphp的方式回答了这个问题

如果要绕过此警告，可以使用和覆盖image/div，并在其上绑定单击/触摸启动事件，以显示视频标签并隐藏覆盖。触发结束事件后，只需隐藏视频标签并显示叠加图像。

**视频开始自动播放，并在视频结束时显示海报**

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<body>
<script type="text/javascript">
document.observe('dom:loaded', function(evt){
    $$('video').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>


document.observe（'dom:loaded'，函数（evt）{
$$（“视频”）。每个（功能（elm）{
elm.play（）；
var wrapper=elm.wrapp（'span'）；
var vid=elm.clone（真）；
elm.observe（'end'，function（）{
包装器更新（vid）；
});
});
});

试试这个

var video=$('#cms_video').get(0);        
  video.play();
  video.addEventListener('ended',function(){
   v=video.currentSrc;
   video.src='';
   video.src=v;   
   $('#cms_video')[0].autoplay=false
    $('#cms_video')[0].load()
});

我不想申请任何课程。我想展示视频海报。视频海报是指html视频播放器具有海报的属性名称，它在加载视频播放器时和视频播放前显示。现在我想在视频播放的最后展示这张海报。海报不能被选择，因为它不是一个元素，而是视频标签的一个属性。试着看看我的答案，我认为它有点简单，可能是重复的