Tag: poster image

By default, the video.js simply shows the last frame of the video once the end has been reached. Sometimes, it comes in handy to show the poster image again once the video has stopped. Luckily, this behavior can be easily achieved:

videojs('yourVideoContainer').ready(function() {
  var myPlayer = this;       

  myPlayer.on('ended', function() {
    myPlayer.posterImage.show(); 
  });
});

For the sake of completeness here is the HTML for the video container:

<video id="yourVideoContainer" class="video-js vjs-default-skin"  
  controls preload="auto" width="1098" height="515"
  poster="/img/video-poster.png" data-setup='{"example_option":true}'>
 <source src="/video/sample.mp4" type='video/mp4' />
 <source src="/video/sample.webm" type='video/webm' />
 <source src="/video/sample.ogv" type='video/ogg' />
</video>