Question

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

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

Answer 1

更简单的方法：

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

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

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

如果您想绕过此警告，您可以使用和叠加图像/ div并在其上绑定click / touchstart事件以显示视频标记并隐藏叠加层。触发结束事件时，只需隐藏视频标记并显示叠加图像。

Answer 2

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

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

Answer 3

只需在视频结尾处，显示一张div与海报的相同src（上面的z-index或隐藏视频）如果您需要重播视频，请在显示的div上绑定一个click事件（以切换可见性和重放）

Answer 4

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

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

Answer 5

尝试

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()
});

Answer 6

尝试为您的海报提供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 
});

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

6 个答案: