HTML5 Video 101

Last week I did a video review of the new Kindle Fire.   As part of my review, I suggested that people deliver their videos to the Kindle Fire using HTML5 instead of Flash.

Why? Because HTML5 video playback on the Kindle Fire, in my testing, was much smoother than Flash.  That led to a number of people wanting to know more about HTML5 video.  So here’s a primer on it.

HTML is a programming language.  It is used to create web pages.  HTML5 is the latest version of the HTML programming language.  One of the biggest additions to HTML5 is support for the video tag.  With it, people can add videos to a web page as easily as they add images.

The idea behind the video tag was standards.  That means the intention was a single video format for the web that made it simple for everyone to add videos to a web page and simple for everyone to watch videos on a web page.  There are no browser plugins required (like Flash or Quicktime) and no confusing/cryptic video embed code is needed (like Flash or Quicktime) when using HTML5 video.

While the idea behind HTML5 video is great, unfortunately the powers-to-be (Google, Mozilla, Microsoft, Apple, etc.) have made it a bit of a mess.  That’s because none of them can agree on what the single video format should be for HTML5.  In a nutshell, Google and Mozilla think it should be WebM or Ogg and Apple and Microsoft think it should be H.264 (mp4).

That means to make your video play using HTML5…across all browsers…you must prepare your video in at least 3 different formats.  WebM and Ogg for Google Chrome and Mozilla Firefox browsers and H.264 for basically all other browsers (including basically all mobile device browsers).

So how do you get your videos into each of these formats? If you want to go the free route, you can use Miro Video Converter.  If you have money to burn, you can use Sorenson Squeeze.  And if you prefer to go the cloud encoding route, both Zencoder and Encoding.com are good choices.

OK…after you have your videos in the 3 different formats (WebM, Ogg and H.264)…how do you embed HTML5 video in your web pages? This is actually the simplest part.  The code goes like this:

<video width="320" height="240" controls="controls">
  <source src="full url to your h.264/mp4 video" type='video/mp4' />
  <source src="full url to your ogg video" type='video/ogg' />
  <source src="full url to your webm video" type='video/webm' />
<video>

Pretty simple huh? You’d just take the above code and paste it in your web page (keeping in mind you need to change the “full url” listings to the actual full URL’s to your videos).  And you’d probably want to change the video width and height values.

Actually, there are more things you can do with HTML5 embed code, but we’re just keeping things simple here.  If you want to see the full array of commands you can use, click here.

Anyway, there are a couple big gotcha’s with HTML5 video.  First, you must create a video in each of the 3 formats…remember, different browsers require different versions of the same video.

For example, if you don’t make an H.264/MP4 version of your video, people using Apple mobile devices, Internet Explorer 9, Safari and a number of other browsers won’t be able to see your video.  Or if you don’t make an Ogg version of your video, people using Firefox won’t be able to watch your video.

Second, Internet Explorer versions 8 and older do not support HTML5 whatsoever.  Only Internet Explorer version 9 supports HTML5.  That means when someone using Internet Explorer 8, 7, 6, etc. tries to watch your HTML5 videos, they won’t see anything.

So what do you do about this issue (after all, a lot of people still use Internet Explorer 8)? You provide Flash fallback.  That means you tweak your HTML5 video embed code in such a way that if a viewer is using a browser that doesn’t support HTML5, the embed code will sense it and deliver the video using old-fashioned Flash.

Of course the next question is, how exactly do you do that? Well, there are lots of options.  One of the simplest (because they offer an embed code generator) is VideoJS.  With VideoJS, all you have to do is supply the URL’s to your files and click a button…they’ll give you HTML5 embed code, with Flash fallback…that you can simply copy and paste into your web pages.

And that’s all there really is to it.  Prepare your videos in the 3 formats (H.264/MP4, Ogg, WebM) and use a free service like VideoJS to build HTML5 embed code with Flash fallback for you.

But if you’re still confused about HTML5 and mobile video in general, check out our Mobile Video Made Simple course.  With it, you can master mobile/HTML5 video in about an hour…even if you’re a complete beginner.  It takes out all of the guesswork and makes mobile/HTML5 video as easy as connecting some dots.