Part One of this tutorial described how to prepare a website to display HTML5 tags, like <video>, properly. Part Two, which you’re reading now, describes how to prepare your video to display in an HTML5 web page. And Part Three describes how to actually embed your video into an HTML5 web page.

The reason one will want to host and embed one’s own videos in a web page in HTML5  is that it will give one more control over a video’s display and playback, rather than using third-party sites like YouTube and Vimeo. In HTML5, videos can actually interact with other elements on a web page, which is something for more advanced tutorials. But, this is how one gets started.

One of the most difficult things about displaying video on the web has always been all the different format standards for each playback device, although Flash players became the most popular since the advent of YouTube.

Modern web browsers, though, are making it so that one doesn’t need to use a separate playback device, whether it’s a QuickTime player or a Flash player, in order to display video. Video playback standards are now being built directly into each browser. However, there’s still the problem of having to deal with multiple format standards so that one video will play across all browsers.

People who regularly encode video for the web are probably familiar with the H.264 codec format. However, since that’s a proprietary, patented format, web browsers are currently investing their time and energy into more modern open source formats. And, where it gets tricky now, is that none of the popular browsers — e.g. Google Chrome, Mozilla Firefox, IE and Opera — can agree on which open source format should be the standard.

So, the bad news is that if you want to encode a video for an HTML5 web page, you have to actually create a minimum of three different versions of it and upload them all to your server. However, the good news is that there’s an insanely easy to use and free open source video encoding program that creates these new formats for you. It’s called the Miro Video Converter, which you can download at that link.

You can use either raw video downloaded from an iPod or other video device, or export any video from your editing software, such as Final Cut Pro or Adobe Premiere, in any codec and Miro will convert it to the two open source formats, WebM and Theora, as well as mp4 if your original video isn’t already in that format.

Miro has lots of other encoding options for specific devices, such as the iPad, Android and PSP, if you want to get more advanced, but for the most basic, all you need is WebM, Theora and mp4.

And, really, this has been a long post giving you lots of background info to do something extremely easy:

1. Download the Miro Video Converter.
2. Use Miro to convert your video to WebM, Theora and mp4 formats.

In the future, I would imagine all editing software will include these new formats, but for now, use Miro.

Continue to Part Three where I give you the HTML5 code to use to display your video in your web pages.