Lesson 6: Building a Custom Video Player

Overview

Earlier in this course you learned to add video to web pages using the <video> element. After doing so you observed that the built-in video player is slightly different in every browser. If you want a player that looks consistent across all browsers, or if you just a want a player that is uniquely your own, you can totally do that with JavaScript.

In this lesson, you will use JavaScript to build custom controls for playing your video, and will use your custom controls to replace the browser's built-in controls.

Learner Outcomes

At the completion of this exercise:

The HTML5 Media API

Once you've embedded media into your web page using the new HTML5 <audio> or <video> elements, you can control them using JavaScript code. This is because HTML5 has an API that enables external control of these elements. API stands for "application program interface", and it consists of a set of variables and methods that can be accessed by external scripts or programs. APIs are common on the web. A few popular examples include:

The documentation for APIs such as those linked above are technical and can be overwhelming at first, but buried within all the technical details are typically some simple examples to help you get started.

The official documentation for the HTML5 media API is contained within the HTML5 spec. The following activities give you a much-simplified look at the basics.

Activities

The Custom Player JavaScript Code

// create a few global variables to be used later
var video, speed, volume;

function init() {
  // initialize the player
  // first, get the media element and assign it to the video variable
  video = document.getElementById('myvideo');

  // get the current playbackRate from the HTML5 media API
  // range is 0 to very fast, with 1 being normal playback
  speed = video.playbackRate;

  // volume range is 0 to 1
  // set it in the middle so we have room to move it with our buttons
  volume = 0.5;
  video.volume = volume;
}

function play() {
  video.play();
}

function pause() {
  video.pause();
}

function changeSpeed(direction) {
  // direction is either 'up' (faster) or 'down' (slower)
  if (direction == 'up') {
    if (speed < 10) {
      // increase playbackRate
      speed = speed + 0.1;
    }
  }
  else if (direction == 'down') {
    if (speed > 0) {
      // decrease playbackRate
      speed = speed - 0.1;
    }
  }
  // so far all we've done is change the value of our speed variable
  // not let's assign it to the player
  video.playbackRate = speed;
}

function changeVolume(direction) {
  if (direction == 'up') {
    // if not fully cranked yet, increase volume
    if (volume < 0.9) {
      volume = volume + 0.1;
    }
  }
  else if (direction == 'down') {
    // if not muted, decrease volume
    if (volume > 0.1) {
      volume = volume - 0.1;
    }
  }
  // so far all we've done is change the value of our volume variable
  // not let's assign it to the player
  video.volume = volume;
}

// wait until the web page has finished loading, then run the init function
window.onload = init;

One problem that's beyond the scope of this course is captions. Some browsers continue to display captions even without the controls attribute, but most do not. Therefore, when building a custom controller you would also need to build in support for closed captions. Terrill Thompson, co-author of this curriculum, has built an open source video player called AblePlayer that includes support for captions plus a wide variety of additional features. Since it's open source, you're free to download it, study the source code, play around with JavaScript, and learn from its example.

All done?

Share your web page with your instructor. If all is well, proceed to Module 3.