How to show html5 video poster end of video play?

Question

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

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

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.

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.

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