HTML5 Video / End of a Video Poster

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

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.