HTML5 Video / End of a Video Poster

Question

With the above; within the HTML

Answer 1

This works for me.

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

Answer 2

I had the same objective, and found a solution by using jQuery to reset the source of the video to itself on ended. Now I get my animated gif poster before and after play. Here is a simple javascript play function and the jQuery code.

function play()
    {
    movie_ID.play(); 

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

Answer 3

A straightforward way of doing this:

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

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.

A more appropriate way to solve this issue is to use an overlay image/div on top the video tag and to hide it when video starts. When the ended event fires just show the overlay image again.

Answer 4

If you want a poster at the end, and thats the only requirement, then i would say just add a ending frame in the video file as that poster and skip loading unnecessary JS. When the video ends you will see the end frame which is now the poster you added.

If you want to display the video poster at the end or in other words reload the video, then use custom event as shown above by EL Yusubov