What does this mean for most people?  In a word, nothing… yet (ok, that was two words).  The fact of the matter is that until we have full browser support for the H.264 video codec, which is currently only available in Webkit-based browsers like Google Chrome and Safari, this seamless and superior technology will never be experienced by the majority.

I don’t anticipate Internet Explorer ever fully supporting the video standard or the code to actually implement it (c’mon, 8 versions in and they’re just now figuring out how to render web pages correctly), but for this to be anything close to a victory over Flash, Firefox needs to get with the friggin program.  While it’s true that Firefox does support the code to get it working, the videos need to be encoded using Theora as opposed to H.264—which, in short, requires two versions of the same file, doubling the necessary server space.  You can see how this would be a problem for a company like YouTube, whose server farms are probably running at max capacity with a ridiculous 12,000 videos views per second.

So, while I personally think it’s great that those of us who opt for Webkit browsers will have an overall better user experience, not to mention that videos from both YouTube and Vimeo are now accessible to mobile platforms without the need for Flash, I would love to see this technology rolled out to the populace as a whole, which will require a massive amount of feature requests and a miracle.

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, Opera 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, Opera, 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.

“Is this a good video camera?”

Unfortunately, it’s pretty difficult to keep up with every single video camera that a company releases. Canon alone has 27 consumer camcorders and 9 professional/prosumer camcorders, so you can imagine how difficult it is for the layperson to differentiate between which features they really need and what is just icing on the cake. So, without further ado, I introduce the Andrew Gormley Video Camera Buying Guide Extravaganza.

I’m not going to recommend specific brands or even models here.  Instead I’m going to focus mainly on new features that are helpful for both shooting and any post-production work you may want to do. Please note that this advice is coming from an indie film maker, so some things I recommend to achieve that “film look” might be completely optional for you.

Prosumer Camcorder, Upgraded

Features That Are Necessary

High Definition – It’s pretty much understood that Standard Definition has one foot in the grave and the other on a banana peel.  As of this writing, 79 out of 100 of Amazon’s Best Selling Camcorders have HD capabilities, so it’s pretty difficult to buy a camera these days that doesn’t shoot in HD, but you also shouldn’t pass one up just to save a few hundred dollars.  Aim for a resolution of 1280×720, which is also known as 720p. If you can get the “Full HD” experience at 1920×1080, then that’s even better.  Make sure to also look for the word Progressive or settings labeled “24p” or “30p”.  This will ensure that your video looks it’s best.

There are a lot of proprietary codecs for handling this HD footage, but they’re all pretty easy to use and import into your editing software of choice, whether it’s something simple like iMovie or Windows Movie Maker all the way up to Final Cut Pro or Avid editing suites.

Solid State Memory - It doesn’t matter if it’s flash memory, an on-board hard drive (also advertised as HDD), P2 cards, etc – This is required.  My old cameras used Mini-DV tapes and I couldn’t believe how much time was lost just importing footage, not to mention the fact that FireWire ports are harder to come by these days (even on new Macs).  Solid state camcorders also allow you to quickly review or delete footage you just shot, so nothing is wasted. Furthermore, importing footage is as easy as plugging your camcorder into a USB port and dragging the video files right to your hard drive for editing.

Note: Stay away from cameras that record directly to mini-DVDs. They often cost more and you run into a similar problem as with mini DV on how to import the footage once you’re done shooting. A post-production nightmare.

Extra Features For The Filmmaker

24p – This was mentioned briefly in the High Definition section above and usually comes coupled with a dedicated progressive mode.  This mode of shooting uses the film-standard 24 frames per second as opposed to the video-standard 30 frames per second and is the closest way to reproduce a film look using a digital camcorder.

Manual Focus – Most of the pricier camcorders have manual focus available, whether it’s a focus ring on the lens or enabled through the camera software. While it does require being a bit more familiar with the in-depth camera settings to take full advantage of, some stunning effects can be achieved through it’s use.

Further Considerations

Sensor Size – Most consumer camcorders come with one sensor inside that’s used for processing the image.  Having a larger sensor helps the camera perform better in low light, pick up a wider range of colors, and produce less noise (pixelation) on your image.  Common image sensor sizes can be found on this site.  Two things to look for that will improve the quality of your footage are: sensor size and number of actual sensors (high end cameras often have 3).

HDMI Output – This can be useful for some people to see what their actual output will look like on a television as what you see on your computer screen (within your editing suite) is not always an accurate representation.

Zoom Length (and the dreaded Digital Zoom) – If you’re going to be shooting anything that you’re not directly a part of (like a sporting event), you’re going to want a camera with a decent optical zoom, usually around 12x or better.  Digital zooms can go up as far as 400x, but quickly degrade the quality of your picture so avoid it all costs.  Optionally, an optical image stabilizer is a great way to keep your handheld shots steady while zoomed when a tripod isn’t available.