An Introduction to HTML5’s Video API

Since the late 90s, when embedding media elements like audio and video clips into web pages, developers have had to rely on third party plug-ins. Flash has become the go-to method for nearly all video sites, and has been widely used for audio embedding as well.

Because of the nature of the Flash plugin, this has limited the accessibility of embedded media. With the introduction of the HTML5 media elements API, this has all begun to change.

Now, many libraries and video players are being introduced that utilize the new <video> and <audio> elements, along with the associated API. Of course, due to cross-browser inconsistencies, it could still be some time before HTML5 video becomes a common industry practice.

In this post, we’ll put aside the browser inconsistencies and other controversies. Here I’m going to introduce you to the HTML5 Video API so you’ll become familiar with how easy it is to provide users with full access to a video’s custom controls when using HTML5 video.

Some Basic Markup

To get us started, here’s the HTML we’ll be using that will hold and play our video:

<video src="example.ogv" controls width="400" height="300"></video>

For simplicity, I’m not using cross-browser HTML5 video code. There are plenty of libraries and articles online that outline how to build “bulletproof” code for HTML5 video. One such page is the Video for Everybody page by Kroc Camen. The code in this tutorial — which will be using the Ogg container format — will work in the following browsers: Firefox 3.5+, Chrome 4+, and Opera 10.5+. Safari and Internet Explorer do not support the Ogg format, so be sure to use one of the supporting browsers when you view the demo page.

As you can see, we’re using the controls attribute to tell the video player, by default, to include visible, accessible controls. Thus, without any scripting or hacks, the user can access the play/pause and volume functionality of the video player.

But what if you want to create your own custom-branded controls and then access the various features of the controls via JavaScript? We’re going to do that in this tutorial. Here’s the HTML we’ll be using to style our own controls:

<div id="controls" class="hide">
	<a id="playPause">▶</a>
	<a id="muteUnmute">⊗</a>
</div>

We’re going to stick to a few simple buttons for our controls: A play/pause button and a mute/unmute button.

After styling these elements (I won’t go into the details on the styling here), the embedded video with our custom controls will look like this:

A few points to note here: As you can see in the code, I’m using a few HTML entities to create play/pause and mute/unmute buttons. This wouldn’t necessarily be the best choice. Because I’m focusing on the API in this post, this will do just fine. But you have the option to use images, CSS sprites, CSS3 techniques, or anything else to help produce an attractive and user-friendly interface.

Setting Up Our Script

As mentioned, our simple custom controls include a play/pause button and a mute/unmute button. We’ve given both buttons in our HTML a unique ID that we can target with our JavaScript. I’m going to use jQuery, so our JavaScript will start off with the shortcut for jQuery’s $(document).ready handler. Then we’ll grab our different objects and place them into JavaScript variables so they’re cached and ready to use:

$(function() {
	var	video = $('video')[0],
		controls = $('#controls'),
		playPause = $('#playPause'),
		muteUnmute = $('#muteUnmute');

	video.removeAttribute("controls");
});

The video variable holds access to the video element itself, and the other variables are used to access the controls container and its two child elements: the play/pause button and the mute/unmute button.

Finally, since we don’t want the native HTML5 video controls to be visible, the last line in that block hides the controls by removing the controls attribute. This ensures that users that don’t have JavaScript enabled will still see the native controls.

Making the Custom Controls Visible

Naturally, since the native controls will be visible without JavaScript, then our own custom controls should not be visible by default. That’s why our HTML has included a class of “hide” on our controls container. Using this class, our CSS sets the controls to display: none. If that class is removed, then the controls will default back to display: block. Here’s the code to do this:

video.addEventListener('canplaythrough', function () {
	controls.removeClass("hide");
}, false);

Here we have two new things at work. First, we’re using JavaScript’s addEventListener method to ‘listen’ for the event in question. Although addEventListener is not supported by IE6-8, that’s not really a problem becaue any browser that supports the media elements API will also support addEventListener.

The event we’re passing into the addEventListener method is the canplaythrough event. This is our first look at the HTML5 video API. According to the spec, if this event has fired, then that means the browser has estimated that uninterrupted playback of the entire video is now possible. So when this event occurs, it’s safe to add our custom controls by removing the “hide” class.

Coming Up in Part 2

So far we’ve set up a basic interface, prepared our script, and we’ve briefly begun to introduce the media elements API. In the next part, we’ll make our two buttons fully functional, and we’ll deal with what to do when our video ends playback.