HTML5 Video / End of a Video Poster

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.

Leave a Comment