Current Classes | General Reference

General Reference

HTML5 and Video

Introduction

Elsewhere I've chronicled some of the issues involved in putting audio or video on a Web site. Since the Web's inception there has been no one standard, broadly supported method of including media on a Web page, and certainly no way of using sound or video without some sort of third party plug-in or media player. At least, until now. HTML5 includes semantic elements meant to do just that—allow for the placement of audio and video on a page without the need of a special plug-in.

Of course, there's always a catch, isn't there. This doesn't mean you can put any old video up on a Web page and expect it to work; you must use a format that the browser recognizes. Alas, not all browsers recognize all the accepted formats (yet). As of this writing the playing field looks something like this:

Okay so it's not a perfect world. And what the heck is an Ogg anyway? Don't despair, things are not a bad (or confusing) as they might appear. Let's take a closer look at these formats.

Containers and codecs

There are many many many video formats out there. Obviously no player or browser can be expected to handle them all. Browser makers seem to have narrowed the field a bit and settled on three container formats. Containers are media formats that are made up of a video codec and an audio codec. Codec stands for "compression/decompression" and is basically a method of packing audio and/or video into very small packages—and then unpacking them again. Containers can often contain a variety of codec types, but the ones above receive the most browser support.

MP4, AAC and H264 may be the ones your most familiar with—Apple uses AAC for it's iTunes store, and H264 is a common codec option in Adobe programs like Premiere and After Effects. However, MP4, AAC and H264 are all patented and have usage restrictions. If you were to use one of those formats for a commercial purpose, you'd be expected to pay a license fee.

For this reason, Ogg was developed. It is an open-source container format that usually makes use of the Theora video codec and Vorbis audio codec—both of which are free and also open-source.

WebM is another open-source format that was released in 2010 and is essentially the next generation of the Ogg format. It uses the open-source VP8 video codec and the Vorbis audio codec. Since most (good) browsers now support WebM, we'll use it in the code below.

Okay you may ask, how do I make a WebM video? Well there are several options. You could download a plug-in for Quicktime Pro. You could also use the Miro Media converter, a free open-source app. Or you could use Firefogg, a cool converter from the folks at Firefox.

Embedding the video on a page

Once you have your video files, the next step is to embed them on a Web page. You can do so with this code:

<video src="yourMovie.webm" width="352" height="288" controls></video> 

Of course, you'll have to change the file name as well as the size attributes. But otherwise that's it! Try it out. Note that it will only work in browsers that can handle HTML5 and the ogg format (try Firefox, Chrome and Opera).

The controls attribute provides the user with controls for the player. If you leave that out the user will not have that option (not recommended!).

Other attributes you could use include preload and autoplay. The preload attribute tells the browser to start downloading the video as soon as the page loads. This makes sense if the entire point of the page is to view the video. However, if the video's not that important, you can set preload to none to minimize network traffic. If you don't want the video to preload you would write preload="none".

Autoplay is pretty self-explanatory, but use it cautiously—having a video play automatically on a dedicated video page (like a YouTube page) is fine. But if it's one of many elements on a crowded page, especially if the video extraneous to the page's content, autoplay should be turned off!

Video for Safari and (shudder) IE

Okay, what about browsers that don't support WebM video? What do we do about them? As it happens the video element can be coupled with additional source tags that can give the browser choices. We can specify multiple file formats and let the browser decide which one to use. Of course, to take advantage of this we need multiple versions of the video—a bit of a pain. But let's assume that we've taken the time to encode both a WebM version and an Mpeg-4. We could structure the code like this:

<video width="352" height="288" controls> 
    <source src="yourMovie.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <!-- for Safari -->
    <source src="yourMovie.webm" type='video/webm; codecs="vp8, vorbis"'> <!-- Opera, Chrome, Firefox 4+ -->
</video>

Now instead of using a src attribute in the video tag, we use it in a series of source tags, each pointing to a different version of the video. The browser will attempt to load the first video in the list; if it can not do that it will move on the second, and failing that try the third.

In addition to the src attribute, each tag contains the video's mime type and codec specification. You should note that not every mpeg uses the codec listed here—there are several options. You need to specify the codec that you used to create the mpeg. A list is available on Wikipedia that may help in determining the proper codec specification.

Okay what about Explorer? Even though Microsoft has been promised that IE9 will support WebM, older versions need to be considered. Fortunately most browsers these days are shipped with Flash players and Flash can handle mpeg-4 video. We can add an object tag that points to our video and add it to our code. But before we can do that we need a SWF file to contain the video in order for the player to play it. Where do you get a SWF video player? One option is to build your own in Flash. However, if that's beyond your ken, Dreamweaver can create a player for you and generate the object code, but only if you use Flash video—yet another version of your video (in addition to the WebM & Mpeg-4 versions)

A better option is to use a different player. I have recently discovered Flowplayer, an open-source Flash-based video player. To use it simply download the player and place it somewhere in your root folder (and then upload it to the Web). It can be accessed with the code below:

<!-- this goes in the head -->
<script type="text/javascript" src="flowplayer/flowplayer-3.2.6.min.js"></script>

<!-- this goes in the body -->
<video width="352" height="288" controls> 
    <source src="yourMovie.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <!-- Safari -->
    <source src="yourMovie.webm" type='video/webm; codecs="vp8, vorbis"'> <!-- Opera, Chrome, Firefox 4+ -->  
    
    <a href="yourMovie.flv" style="display:block;width:352px;height:288px" id="player"> </a> 
    <script>
        flowplayer("player", "flowplayer/flowplayer-3.2.7.swf");
    </script>
</video> 

The Flowplayer comes with three Javascript files, usually in a folder called "flowplayer," which you should put in your root folder. The lines of Javascript in the code above point to those files, so make sure your urls are pointing to th eright place in your root folder, and make sure they're pointing to the correct versions of the Flowplayer that you have. The code above assumes that you have put your HTML file and video files on your main root level. If you put either in a sub-folder you'll have to adjust the code accordingly (adding a "../" to the link to the Flowplayer–and/or–folder names to the video files).

Firefox issues

If you've gotten this far and tried everything out, including uploading the files to a server you may have noticed something funny happening with Firefox. Specifically—it doesn't work! You may see a gray screen with a little "x" on it. What's the deal?

If this is happening to you then it's likely that your server is using the wrong mime type when it serves the videos. Fixing this is a little trickier—we need to change the server settings. If you’re using the Apache web server or some derivative of Apache, you can use an AddType directive in your site-wide httpd.conf or in an .htaccess file in the directory where you store your video files. (If you use some other web server, consult your server’s documentation on how to set the Content-Type HTTP header for specific file types.).

Confused? Try this:

Create an text file with the following code:

AddType video/ogg .ogv  
AddType video/mp4 .mp4  
AddType video/webm .webm

Save it as .htaccess into the folder that contains your videos and upload it to the server. Hopefully that will take care of it.

Other resources

Dive into HTML5 by Mark Pilgrim

A gentle introduction to video encoding

Video for everybody

HTML5 Rocks

WHATWG.org HTML Standard