HTML 5 Video - Part 2: Customised Controls

Written by Antony D'Andrea

Last week, I started a series of posts to be a guide for HTML 5 Video. We started with the basic introduction. Check it out here if you want to catch up.

This week, we will be looking at how you can control your player with JavaScript. As usual, you can find a complete working example of this tutorial on Github. Each tag corresponds to one part.

Setup

Let us start with some changes to the code from last week.

First, I am going to get rid of the player's default controls. This is not a compulsory step for building your own, but I am going to. If you remember, the video tag has a controls attribute that tells the browser to have the. Simply remove this attribute and you will be left with a player that you can do nothing with.

Second, I am going to make my buttons which will soon be attached to JavaScript. Pretty basic HTML:

 <div id="video_controls">
     <button id="play">Play</button>
     <p>Seek: </p>
     <button id="seek_beginning">Restart</button>
     <button id="seek_forward">+10</button>
     <button id="seek_backwards">-10</button>
     <p>Volume: </p>
     <button id="volume_up">+</button>
     <button id="volume_down">-</button>
     <button id="volume_mute">Mute</button>
  </div>

This looks like:

Finally, I am going to include JQuery in the head as I am lazy and want to take advantage of its click event handling for the buttons. You can simply use Google's CDN link for a quick include:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Now we are ready to write some code for our controls!

Getting the Player Object

The video's DOM object comes all of the methods and properties that you need to control the player. But the first step is to get the player. This is as easy as:

var player = document.getElementById('my_player');

There is one small gotcha if you are using JQuery. You would normally expect for the above to be equivalent to:

 var player = $('#my_player');

But it is not and doing this will not work. The functions we will use are part of the DOM object. But JQuery returns a JQuery object that contains the DOM object. So to use JQuery, you would have to do this:

 var player = $('#my_player').get(0);

The get method retrieves the actual DOM object from inside the JQuery object.

Playing and Pausing

Let's start with the most basic of functions: playing.

Take the following JavaScript:

$('#play').click(function(e){
    e.preventDefault();
    player.play();
});

The first line attaches the click event to the button with the id, 'play'.

The e.preventDefault(); makes sure that the button doesn't do any other funny business.

Finally, the player.play(). Obviously, this assumes the player variable is retrieved earlier. This is the actual line that causes the player to play. If you put this code in and press the button, you should see the video start to play.

Great. Now how do we pause it? Well, it is as simple as:

 player.pause();

I am going to modify the click event so that we can use the same button to play and pause:

 var playing = false;
 $('#play').click(function(e){
     e.preventDefault();
     if (!playing) {
         player.play();
         $(this).html('Pause');
         playing = true;
      } else {
         player.pause();
         $(this).html('Play');
         playing = false;
       }
   });

So we have a variable playing that holds the state of the player. Then inside the event handler, we play or pause depending on if it is playing or not.

We also use $(this).html('Pause'); to change the text of the button to reflect what it is going to do when pressed. This is more of an aesthetic thing.

Next week, we will learn a slightly different way of doing this using events giving by the player.

That is it as far as playing and pausing are concerned. Once again, the browser has taken care of most of the hard work and provided very simple functions for you to use.

Seeking

Next thing we will program are the buttons for seeking, that is, moving the time forwards and backwards. Let's do restart first.

We do a click handler just like with the play button and put our code in it:

$('#seek_beginning').click(function(e){
    e.preventDefault();
    player.currentTime = 0;
});

Very easy. There is no function for this one, but a public variable. player.currentTime holds the current time that video is on. You can override this with any number of seconds.

Since we want to go to the beginning, we simply set it to 0. For the forwards and backwards buttons, we use the same variable:

$('#seek_forward').click(function(e){
    e.preventDefault();
    player.currentTime = player.currentTime + 10;
});
$('#seek_backwards').click(function(e){
    e.preventDefault();
    player.currentTime = player.currentTime - 10;
});

This shows how currentTime has the time of the video at that moment, then we override it by adding or subtracting 10 seconds.

Don't worry about the minimum and maximum times. The player is smart enough not to attempt go any further than it can. The same can't be said about the volume control as you will see next.

Volume Control

Let's start with muting.

var muted = false;
$('#volume_mute').click(function(e){
    e.preventDefault();
    muted = !muted;
    player.muted = muted;
    if (muted == false) {
        $(this).html('Mute');
    } else {
        $(this).html('Unmute');
    }
 });

So, once again, we have attach the function to the mute button's click event. We also set up a variable for tracking if it is muted or not.

The main point of interest is the player.muted. Again, we access the property directly without using a function. It is either true or false: muted or not muted. It is so easy!

Now for increasing the volume:

$('#volume_up').click(function(e){
    e.preventDefault();
    player.muted = false;
    muted = false;
    $('#volume_mute').html('Mute');
    var newVolume = player.volume + 0.1;
    if (newVolume > 1) {
        newVolume = 1;
    }
    player.volume = newVolume;
 });

There is a bit of added complexity. I start off by unmuting the player in case it was. The focus of this bit should be the player.volume. This holds the current volume of the player and changing its value changes the volume (like with currentTime).

The value is between 0 and 1, where 1 is obviously maximum. The other thing to note, is that once you reach 1, unlike with currentTime, it will throw an error in the console try if you go above it. That is why I have a check there that stops it at 1.

The down volume is built almost the same, just without the checks on the mute button:

$('#volume_down').click(function(e){
    e.preventDefault();
    var newVolume = player.volume - 0.1;
    if (newVolume < 0) {
        newVolume = 0;
    }
    player.volume = newVolume;
 });

Again, we have to check ourselves that it doesn't go below 0, otherwise we get some nasty errors in the console.

Remember, the volume is between 0 and 1. If you want a more user friendly number, for example a percentage, just multiply by 100.

Conclusion

So as you can see, it is really easy to build custom controls for your HTML5 player. The code here is very basic and can be expanded on and improved a lot. Next week, we will look at more advanced ways to control your player and other on screen elements using callbacks.

© 2012-2023