如何展示html5视频海报视频播放结束?

I want to show video poster after play. I am trying following code but no luck.

我想在游戏结束后播放视频海报。我正在尝试遵循代码，但没有运气。

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

5 个解决方案

#1

A more straightforward way of doing this:

更直接的方法是:

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

Which is a shortcut to loganphp answer. Indeed when changing the src of a video tag you implicitly call a load() on it.

这是loganphp答案的快捷方式。实际上，当更改视频标记的src时，您会隐式地调用它的load()。

This method has the caveat to request the media URL again and depending on caching settings it may re-download the full-length media resource causing unnecessary network/CPU usage for the client. But still it does answer the question the way loganphp asked it.

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

If you want to bypass this caveat you can use and overlay image/div and bind a click/touchstart event on it to show the video tag and hide the overlay. When the ended event has fired just hide the video tag and show the overlay image.

如果您想绕过这个警告，您可以使用和覆盖图像/div并在其上绑定一个单击/touchstart事件来显示视频标记并隐藏覆盖。当结束事件被触发时，只需隐藏视频标记并显示覆盖图像。

#2

Finally I achieved my goal with following code

最后我用下面的代码实现了我的目标

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

#3

Simply at the end of video, show a div with the same src of the poster (with upper z-index or hide the video) If you need to replay the video, bind a click event on the showed div (to switch visibility and replay)

简单地在视频结尾，显示带有海报相同src的div(带有上方的z-index或隐藏视频)如果需要重播视频，在显示的div上绑定一个单击事件(以切换可见性和重播)

#4

**video start autoplay and Poster showing at end of video **

**录像开始自动播放，并在录像结束时张贴海报*

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

#5

-1

Try to give your poster an id or class then you can do:

尝试给你的海报一个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 
});

#1