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:

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:

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:

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.

Louis Lazaris is a front-end developer and co-author of HTML5 & CSS3 for the Real World published by SitePoint. He's been involved in the web devleopment industry for more than 10 years and he blogs regularly on front-end technologies on Impressive Webs.
More articles by Louis Lazaris

Be careful with the “canplaythrough” event – it doesn’t fire just once, but _anytime_ the video has reached a state of complete playability (eg. after seeking)

In Popcorn.js (http://www.popcornjs.org) we’ve create a special event hook called “canplayall” which behaves the same as “canplaythrough”, but will only fire the first time “canplaythrough” is dispatched.

I recommend looking into the WebM format for this demo. WebM is now supported by Chrome, Firefox, Safari 5.1+, Opera, and Internet Explore 9 (with a plugin). Plus I have found better performance with WebM, compared to OGG and H.264

Hey WordPress lovers. Every month dozens of incredible free WordPress plugins are released by the community, and we’re here to bring them to you. This seems to be a month of small but useful utilities that only do one or two things, with a few exceptions. So go on. March on down to the list, and get to it! (I'm only a little bit ashamed of that pun.) WP NoteUp ... Notes! Alongside your posts and pages! Use them to remind yourself, or other authors, about things you'd put in a note. That's really all there is to...

WordPress plugins are coming out all of the time, right and left. Every day, they’ve got new ones in the WordPress plugin repository for the curious developer to check out. Over time, your average designer or developer will end up with a list of their favorites. Usually, they’re plugins that solve common problems, are up-to-date and well-maintained, with good support. With that in mind, we’re sharing a list of some of the best plugins out there. Disable Comments ... Disable Comments does......

When I first started out creating websites with WordPress, I was in awe of the depth and variety of plugins available. During those golden days I would willingly install just about anything that looked cool. Shortly thereafter, I was smacked in the head by reality. Stuff started breaking and seriously hurt my good time. It turns out that not every plugin is a great one. And there are times when it seems like the work we do is held together with bubble gum and duct tape. Everything works splendidly until it...

WordPress is undoubtedly one of the most popular tools on the Internet because it makes it so easy to get a functional web site up and running in such a short time. And then there are the plugins. If you want your WordPress site to do something then odds are there is a plugin that you can install to make your site do what you want it to do. But plugins pose a bit of a problem at times. Since they are created by third-party developers you never know what quality control practices are used and what security testing...

WordPress beginners have difficulty customizing their websites past simple text changes, especially if they have no background knowledge of HTML or CSS. WordPress page builder plugins allow just about anyone to build a stylish or professional looking web page, through a user-friendly interface - quickly, and without knowing HTML or CSS. Though it may seem like WordPress page builder plugins have usefulness mainly for the technically unsavvy, they can also make a WordPress developer’s job...

Oftentimes, setting up a WordPress website results in a haphazard scramble to configure enough of the right plugins to make the client happy, and address any specific needs they might have mentioned. But a failure to install certain plugins means the client will come back at you with questions as to why it wasn’t done in the first place. Though you’re probably happy to rectify the problem (and collect a little extra money on the project), going back in to install plugins can distract from more profitable...

In Part 1 of this series we took a look at how you can better secure your WordPress files during, and after, the installation of the software. But once you have the files hardened against different threats, it is time to start looking at some of the different plug-ins available that can help you further protect and secure your WordPress site. WordPress Firewall 2 ... Having worked with a company that deals with web application firewalls, I can tell you from firsthand experience that these are by far one...

There’s a goal behind every website, and a specific chain of events that must occur before each goal is accomplished. Whether you want someone to sign up for your email newsletter, or fill out a contact form, these things don’t happen without the proper triggers. Used strategically, WordPress plugins can assist with the realization of important goals. Here’s how to turn your website into a conversion machine with WordPress Plugins. Essential Grid ... Essential Grid is an all-around grid solution...

About

DeveloperDrive.com is a blog about web development from the makers of the popular web design blog WebdesignerDepot.com
Founded in 2011, we focus on the latest trends, tutorials, opinion articles as well as tips and tricks to empower our readers to become better web developers.