Return VideoJS Player to Poster Frame After Video Ends

I’ve written previously about VideoJS and a problem I faced whilst using it. Todays post isn’t about a problem as such, but more a usability improvement that, to be honest, I couldn’t believe wasn’t default functionality.

The improvement I’m referring to is returning the video to show the poster frame when it’s finished playing all the way through. By default the video plays through but just stops on a blank screen at the end. The code provided below does a number of things:

– Shows the poster frame
– Reverts the position of the video to zero seconds
– Hide the controls
– Shows the play button
– Cancels out of full screen

Let’s take a look at this code in action:

var video_player;

$(document).ready(function()
{
    // 'videoplayer' is the ID of our <video> tag
    videojs("videoplayer", {}, function()
    {
        video_player = this;
				
        video_player.on('ended', function()
        {
            video_player.posterImage.show();
            video_player.currentTime(0);
            video_player.controlBar.hide();
            video_player.bigPlayButton.show();
            video_player.cancelFullScreen();
        });
    });
});

The only other thing we need to do then is to allow the user to play the video successfully again for a second time. To do this we need to add some actions for when the user plays the video. As a result our full code looks like so:

var video_player;

$(document).ready(function()
{
    // 'videoplayer' is the ID of our <video> tag
    videojs("videoplayer", {}, function()
    {
        video_player = this;
				
        video_player.on('ended', function()
        {
            video_player.posterImage.show();
            video_player.currentTime(0);
            video_player.controlBar.hide();
            video_player.bigPlayButton.show();
            video_player.cancelFullScreen();
        });
        
        video_player.on('play', function()
        {
            video_player.posterImage.hide();
            video_player.controlBar.show();
            video_player.bigPlayButton.hide();
        });
    });
});