This is simply a brief overview of the HTML5 video tag and the first of several articles that I intend to post as I begin learning and experimenting with HTML5. It’s been a while since my post, “Why I Decided to Abandon Flash and Focus On HTML5, CSS, and JavaScript“, and I’ve been itching for a chance play around with the HTML5 video and audio tags. So, let’s get started…

First, let’s take a look at the HTML5 video tag:

<video></video>

It just couldn’t be any sweeter! As simple as it is, we still need to add some guts in order to get it to work. First we need to add the playback controls to our video player. This is as simple as adding the word ‘controls’ inside our opening video tag. The great thing about HTML5 video is that the browser handles all the functionality and display of the controls behind the scenes. Just be aware that each browser handles the controls a bit differently. For example, a fullscreen button is available directly in the player controls in Safari, whereas in Firefox, the user must right-click to bring up the fullscreen option.

<video controls></video>

Next we need to specify the source of the video we would like to display. Currently, HTML5 supports three video types, mp4, webm, and ogg. Since the majority of video on the web is found in the flv format, you will most likely need to convert your flv video to mp4, webm, and ogv. A number of video conversion tools can be found on the web. Personally, I like to use the Miro Video Converter. It’s free, super easy to use, and can convert almost any video to MP4, WebM (vp8), Ogg Theora, or for Android, iPhone, and more.

In order to ensure that our video is accessible in all major browsers, we need to include the source to mp4, webm, and ogg formats. Here is the final code with a custom fallback message that will display if the user’s browser does not support HTML5 video:

<video controls>
    <source src="http://video.webm" type='video/webm; codecs="vp8, vorbis"'>
    <source src="http://video.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="http://video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

I have tested the previous code in the latest versions of Firefox, Safari, Chrome and Opera, as well as on the iPhone and iPad. In my next post, I will explore how we can customize our HTML5 video player with a little CSS and javascript.