Andrew Gormley

I recently had the good fortune of working on a small project that lent itself to some experimentation with newer technologies. The goal was to create a simple landing page with some light graphics, pictures, and a video. I had the option to let it live inside the existing ecosphere of the site (using PHP to include site-wide JS and CSS) or opt for a leaner, more agile output. I took the latter route as it was something I’ve done a lot of reading on and eventually wanted to do with my site for either screencasts, general portfolio work, or both. I dove headlong into HTML 5 and was pleasantly surprised by the results. I now present you with the process, the pitfalls, and other considerations.

First Things First

Obviously the first thing you’ll need is a high quality source file. (Note: any file will do, but encoding from the original, lossless source always yields best results). In my case, I was working with an HD video file that I just finished editing in Final Cut and exported using Compressor. If you’re exporting from an editing suite and not intending to serve up an HD version of your video, then exporting a standard DV file will work. If you’re taking the video directly from a video camera like a Flip Mino, Kodak Zi8, or even your phone, then chances are your videos are already compatible.

A Brief and Incomplete History of Video Codecs and Containers

Working with video can get overwhelming very quickly if you’re unfamiliar with the terminology or concepts, so here’s a quick breakdown of video as well as the two types we’ll be dealing with: MP4 and Ogg.

It’s safe to assume that if you download videos from the internet, you’ve encountered a few of the more common extensions: MOV, MPG, AVI and unfortunately WMV. Those files are known as video containers. Think of a video container as you would a ZIP file: an all-in-one package that contains the content you’re really after. In the case of video containers, the files within are known as streams or tracks and represent a variety of things including video, audio, subtitles, and more.

Ogg is a free, open-standard container format supported natively by Firefox 3.5+, Google Chrome, and most distributions of Linux. You can also watch Ogg content on OS X or Windows easily enough by installing the appropriate codecs. For our purposes, we’ll be dealing with the OGV container, which is specific to video. Within the OGV container, we’ll have two tracks: the Ogg Video track known as “Theora” and the Ogg Audio track known as “Vorbis”. Ogg file formats are on their way to becoming the standard way that Wikipedia delivers audio and video information, in hope of establishing this patent-free codec as the <video> standard.

MP4 is the container format of choice for Apple and most mobile platforms and is supported natively by Safari (Webkit), Flash video players, the iPhone, some Android phones, and also Google Chrome. Within the MP4 files we’ll be working with, we’ll again have two tracks: “H.264″ for video and “AAC” for audio. H.264, like Theora, is a video codec, but the comparisons end there. H.264 offers a plethora of options and features that are a result of it’s evolution over many years. If you’ve ever watched a trailer on Apple’s site, a BluRay movie, and HD video on YouTube, or downloaded a movie/television show through iTunes, then you’ve encountered H.264 in one of it’s many profiles. H.264 profiles are the key to its versatility, as different profiles best serve different mediums. The Baseline H.264 profile is supported on the iPhone and some Android phones, while the Advanced Profile is used by BluRay discs for the ultimate in video quality.

So, to recap:

Ogg

• Ogg is supported natively by Firefox 3.5+, Google Chrome, and most Linux distros
• Ogv is the container we’ll be working with
• The video track within an ogv container is known as “Theora”
• The audio track within an ogv container is known as “Vorbis”

MP4

• MP4 is supported natively by Safari, Google Chrome, iPhone OS, Android OS, OS X, and Flash video players
• MP4 is also the name of the container we’ll be working with
• The video track within our mp4 container is known as “H.264″
• The audio track within our mp4 container is known as “AAC”

Acquiring the Encoders

I’ll preface by saying that I had a hell of a time finding a reliable GUI-based Theora encoder. The Quicktime plugin was buggy and didn’t always output files as expected, even resulting in a few crashes. Firefogg, a highly recommended Firefox extension, simply did not work for me while dedicated encoding programs that I looked into, particularly Episode and Sorenson Squeeze, were both absent of the Theora codec entirely. This left me with the command line alternative: ffmpeg2theora. For those of you not comfortable working in the command line, fear not, as the calls to output a Theora video file are quick and easy. For exporting the H.264 video, I used the free (and incredibly nifty) Handbrake, which is available for Windows, OS X, and Linux.

You Down With Ogg?

After installing ffmpeg2theora, you’ll have to open either your terminal (OS X/Linux) or command prompt (Windows). From there, you can type “ffmpeg2theora –help” to get your bearings or just base your settings off of mine. After playing with a few variations of settings, the ideal preset for my project came out to look like this:

ffmpeg2theora –videoquality 6 –audioquality 4 –max_size 416×232 –optimize InputFile.mov

• videoquality X — where X can be any number from 0 to 10
• audioquality X — where X can be any number from -2 to 10
• max_size tells the encoder what the output size should be. If removed, input and output source size will be the same.
• optimize adds some time to the encode process, but gives you the best possible balance of quality and file size
• InputFile.mov can be almost any type of video container. A shortcut to inputting it is to simply drag and drop the file into your Terminal/Command Prompt after writing out the above settings

My uncompressed input file was 106MB at a resolution of 1280×720. Using these settings the file size came down to just a fraction above 16MB. I easily could’ve gone lower than that, but didn’t want any visible video degradation and anything below 20MB seemed like a reasonable streaming video size.

H.264 U

Encoding with Handbrake should be much easier for the average person since there’s a nice, clean interface in which to work. After launching the program, select your input source and, from the Preset Drawer, select “iPhone and iPod Touch”. This setting isn’t specifically for these devices, but more a good starting point from a compatibility point of view. From the top down, choose these settings:

• Container: MP4
• Make sure “Web Optimized” is checked
• Video Codec: H.264
• Framerate: Same as source
• Constant Quality: This is (very loosely) akin to Theora’s 0-10 scale and can be tested by enabling live preview in Handbrake to view your settings live on the video before committing to a lengthy encode. Power users could also simply specify a Target Size or Average Bitrate.
• Under the “Audio” tab, make sure that the Samplerate is 44.1 as 48 is overkill for web video.
• Click on the Picture Settings icon and then adjust the video to your desired size. You may also crop here if necessary.
• Finally, before submitting the export, you can click on the Preview Window icon to get a live, 5-60 second preview of your video with the settings you’ve chosen applied.

Going from the aforementioned uncompressed file I was able to get the MP4 down to 17Mb, which is a space savings of roughly 600% with relatively no visible pixel degradation or blurring.

The Code To Get It Done

The HTML5 code to embed a video is super simple and very much akin to using the <img> tag:

<video src=”MyVideo.ogv”></video>

You can take it a step further and add a width and a height, just like with images:

<video src=”MyVideo.ogv” width=”640″ height=”480″></video>

There are also a number of options you can add on to your video tag, they are: controls, autoplay, autobuffer. They’re all pretty self explanatory, and equally easy to implement. For example:

<video src=”MyVideo.ogv” width=”640″ height=”480″ controls autoplay></video>

The above line tells the browser to use it’s native controls for video and autoplay as soon as the page is done loading. You could swap autoplay with autobuffer to have the video begin downloading right away and then have the user initiate playback using the native browser controls. The options aren’t endless, but they’re certainly nice to have.

The only thing remaining is specifying which video will work in which browser. Rather than wasting away precious bandwidth by loading two movies and letting the browser decide which one it can handle, all you have to do is use the <source> element of HTML5 to tell the browser which video to download. The source element looks like this:

<video width=”640″ height=”480″ controls>

<source src=”MyVideo.ogv” type=’video/ogg; codecs=”theora, vorbis”‘>

<source src=”MyVideo.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>

</video>

So from that you can see that the video element no longer links to the file, but still contains the video attributes like width, height, autoplay, etc. Inside the video element we have two source elements that give us the path to the video as well as the video type, respectively. Note that the type attribute is wrapped in single quotes, which is a little weird, but this is due to the fact that the codecs have to wrapped in quotation marks for this to work.

Beware of the Mimes

I ran into a hugely frustrating issue where my development server simply wasn’t playing the OGV video natively in Firefox or Chrome, yet when I tested my code locally everything worked perfectly. I tried different character encodings, files permissions, and much more before I figured out that it was a simple issue of the server not understanding what the hell an OGV file is in the first place. There are two ways to remedy this issue:

1. If you’re the server admin *and you know what you’re doing*, you can edit httpd.conf and add the following lines to cover all variations of OGG media (one per line, do no include commas): AddType video/ogg .ogm, AddType video/ogg .ogv, AddType video/ogg .ogg
2. If you’re not the server admin but have FTP access, create a file called “.htaccess” in your root directory and add the lines you see above in the same format.

Note that the first method is a server-wide change whereas the second must be done on a domain-by-domain basis. Once I established my Mime types, it was smooth sailing.

In Summary

HTML5 video is exactly what a lot of people have been waiting for and, beyond learning a little bit about video encoding, should be comfortable territory for any proficient HTML coder. The only obstacle at this point is Internet Explorer, which seems to have no intention of supporting either file type now or in future versions. Though it would be easy enough to write a Javascript workaround to fallback on YouTube in the event of IE, the native implementation and seamlessness are really what make the HTML5 video element shine. In the web development world, where working drafts take years to be approved and the inhabitants argue fruitlessly over the minutiae of doctypes or trailing slashes, HTML5 video feels like an evolutionary first step in the right direction: An open web that utilizes open source tech to solve usability conundrums.

You can view my finished page here.