HTML5 Video / End of a Video Poster

Question

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

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

Answer 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()
)