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:

you will be able to explain what an API is, and how you can use it to control the content of web pages.
you will be able to use JavaScript to control the HTML5 video element.

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:

Flickr API for managing photos
YouTube API for managing videos
Twitter API for creating new Twitter applications
Facebook API for developing Facebook apps
Google Maps JavaScript API

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

Open video.html in both your web editor and browser.
In your source code, add an id attribute to your <video> element. The id can be anything, but let's assume you use id="myvideo". Adding an id makes it easier to reference the video using JavaScript.
Remove the controls attribute from the <video> element. You're going to build your own controls, so you don't need the browser's built-in controls anymore.

Below the video element, add a new <div> element and fill it with <button> elements that will be used to control the player, like this:

<div id="myplayer">
  <button onclick="play()">Play</button>
  <button onclick="pause()">Pause</button>
  <button onclick="changeSpeed('up')">Faster</button>
  <button onclick="changeSpeed('down')">Slower</button>
  <button onclick="changeVolume('up')">Louder</button>
  <button onclick="changeVolume('down')">Softer</button>
</div>

Use your CSS skills to stylize these buttons however you like. Add opening and closing style tags (<style> and </style>) to the top of the source code, inside the <head> element. Then, add your CSS to this new style section. Since these styles only affect the player buttons on this one page, you don't need to add them to the sitewide external style sheet.
Each of these buttons calls a JavaScript function onclick (that is, when a user clicks the button or presses Enter). To make these buttons work, you now need to add the JavaScript functions. Start by adding opening and closing script tags (<script> and </script>) to your source code, inside the <head> element. These can go anywhere in the head section, but one good spot would be immediately beneath the style section that you added in the previous step.
Inside the new <script> element, copy and paste the code that is provided below. Study the comments to be sure you understand how it works.
Save your file and view the page in your browser. Does it work? Try playing around with the JavaScript code to see if you can change its behavior.

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.