Return VideoJS Player to Poster Frame After Video Ends

September 25th, 2013 - Posted by Steve Marks to (X)HTML / CSS, Javascript / jQuery, Web Development.

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();
        });
    });
});
This entry was posted on Wednesday, September 25th, 2013 at 11:14 am by +Steve Marks and is filed under (X)HTML / CSS, Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (1)
  1. GoTeamScotch says:

    Worked like a charm. Thanks for this :)