HTML5 Video / End of a Video Poster

<video controls="controls" poster="http://gifs.gifbin.com/1233925271_8be9acc.gif" style="width:800px;">

With the above; within the HTML5 <video> tag, I can add a poster; of an image or animated .gif just fine and plays / runs before the actual video is 'played'.

NOW, how can I add an image; specifically a .gif (animated .gif works with poster) that will run AFTER the video has played through?

Solution 1:

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.

Solution 2:

This is what I ended up doing to see a poster after the video finished playing:

# Show poster at the end of the video
$('video').on('ended',->
  $('video')[0].autoplay=false
  $('video')[0].load()
)

Solution 3:

In short: what you need is to add video.addEventListener('ended',function() {}) and trigger video.load() in your custom JavaScript.

Here is a related post that redirects after video is played, you may modify it accordingly - Redirect html5 video after play.

References to look for detailed information:

Everything you need to know about HTML5 video and audio
Media events to which you can bind
HTML5 Video Events and API
MSDN - Using HTML5 video events

Solution 4:

try this

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

Solution 5:

Finally I got the solution: video will autoplay first-time and at end of video you will see the poster image:

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