Create Custom Controls for your HTML5 Video Player

Create Custom Controls for your HTML5 Video Player

Today I thought it high time to revisit my Build an HTML5 Video Player tutorial and build upon what we created. That HTML5 player was fully functioning and incorporated quite a bit of functionality, including stop/start, pause, replay, volume, and mute actions. Since then, I received a lot of requests for a slider volume control instead of plus and minus buttons. Seeking and full screen viewing capabilities were also absent in that first incarnation. Therefore, we will be implementing those features today. As a bonus, we’re going to incorporate Access Keys as well.

New Controls

Take a look at the HTML markup below and you’ll notice a couple of new controls: the volume-bar range and the full screen button.

<div id='controls'>
        <progress id='progress-bar' min='0' max='100' value='0'>0% played</progress>
        <button id='btnReplay' class='replay' title='replay' accesskey="R" onclick='replayVideo();'>Replay</button>
        <button id='btnPlayPause' class='play' title='play' accesskey="P" onclick='playPauseVideo();'>Play</button>
        <button id='btnStop' class='stop' title='stop' accesskey="X" onclick='stopVideo();'>Stop</button>
  <input type='range' id='volume-bar' title="volume" min='0' max='1' step='0.1' value='1'>
        <button id='btnMute' class='mute' title='mute' onclick='muteVolume();'>Mute</button>       
  <button id='btnFullScreen' class='fullscreen' title='toggle full screen' accesskey="T" onclick='toggleFullScreen();'>[  ]</button>
</div>

Shortcut Keys

The accesskey attribute specifies a shortcut key to activate/focus a particular element. You can assign any key you wish, but note that the way of accessing the shortcut key varies in different browsers:

Hence, on Windows Chrome, the shortcut for the Play button would be [Alt] + P.

The accesskey functionality is completely built into the browser so no coding is necessary. No additional accessibility information should be required either as the nested text for elements will be read by screen readers when the button is accessed, even though we are offsetting the button text for esthetic reasons.

It should be noted that I based my shortcut keys on the American Foundation for the Blind’s Accessible Video Player. For instance, on Windows, its Quick Keys are:

• Play/Pause (ALT-SHIFT-P)
• Stop (ALT-SHIFT-X)
• Forward (ALT-SHIFT-W)
• Rewind (ALT-SHIFT-Q)
• Full Screen (ALT-SHIFT-F-ENTER)

Setting the Volume

The video player’s volume property sets the volume within a range of 0.0 and 1.0 so all we have to do is link it to the value of the volume bar during its onchange event.

// Get a handle to the player
//the absence of the var keyword stores
//the player variable in the global (window) namespace
player = document.getElementById('video-element');

// Update the video volume
volumeBar.addEventListener("change", function(evt) {
    //the event target is the volumeBar
    player.volume = evt.target.value;
});

Toggling Full Screen Viewing

JavaScript offers the Fullscreen API for programmatically requesting full screen display from the user, and exiting full screen when desired. At this time, the full screen API’s requestFullscreen() method is still prefixed in some browsers, so you’ll have to do a bit of checking to determine which to use. There are also properties that determine whether or not the video element is currently in full screen mode or not. We can use that to toggle back to regular mode.

function toggleFullScreen() {
  if (player.requestFullscreen) {
      if (document.fullScreenElement) {
          document.cancelFullScreen();
      } else {
          player.requestFullscreen();
      }
  }
  else if (player.msRequestFullscreen) {
      if (document.msFullscreenElement) {
          document.msExitFullscreen();
      } else {
          player.msRequestFullscreen();
      }
  }
  else if (player.mozRequestFullScreen) {
      if (document.mozFullScreenElement) {
          document.mozCancelFullScreen();
      } else {
          player.mozRequestFullScreen();
      }
  }
  else if (player.webkitRequestFullscreen) {
      if (document.webkitFullscreenElement) {
          document.webkitCancelFullScreen();
      } else {
          player.webkitRequestFullscreen();
      }
  }
  else {
      alert("Fullscreen API is not supported");
      document.getElementById('btnFullScreen').disabled = true;
  }
}

Building the FullScreen Button

All of the player buttons share the same PNG graphic and position it to their icon via the CSS background-position property. Not so with the FullScreen button; it employs the square bracket characters ([ ]) to create the same button graphic as featured in the YouTube player. The distance between the brackets is achieved by inserting non-breaking spaces between them ([  ]). Those are necessary because browsers reduce all whitespace to one space character. A little CSS styling is all that’s required to make the FullScreen button appear like the other graphics:

.full screen {
    text-indent: 0px;
    color: #00c600;
    background-color: black;
    background-image: none;
    padding: 0px;
    font-weight: bold;
    padding-bottom: 3px;
}

There are no demo files to download for this tutorial. Instead, there’s a fully functioning player on Codepen.

Conclusion

Advances in HTML5, CSS3, and the introduction of new JavaScript APIs have rendered technologies like Flash obsolete. Now, even a part-time coder can create a fairly slick video player.