How To Use HTML5 Video Tag – The Basics
Not as scary as I thought
NOTE: I did have to configure my server so that the ogg MIME type would handle the .ogv extension. If you use Hostgator.com, this is easy. Let me know if you need help.
You’ve all heard of the new HTML5 video tag, but if you are like me, you have seen an example and were like wtf? I was, until a few days ago. It is actually pretty easy, and only takes a few minutes. There are some things you need before you actually get going with it:
- MP4 video file – for Webkit
- ogv video file (Theora codec) – for Firefox
- flv file – for everyone else
- swfobject.js – for the swf
Be a convert
First things first, you need a video converter. I don’t know about you, but I didn’t have anything that would convert a video file into either an MP4 or Theora format. I found a really damn good one though. It’s free, easy to use, and…wait, did I mention free? It’s called Miro Video Converter, and I highly recommend downloading it (available for PC and OSX). If you look at the screenshot to the left, you will just how easy it is to use. You drag and drop your video into the middle square, select the output type, and hit convert (and it will convert a TON of different types). That’s it! So for the HTML5 video, you need to convert it once to MP4, and once to Theora.
The actual code
Let’s make a note here, that I am just doing something basic here to get the video working in all browsers. It is up to you to make it pretty. Here is the basic code:
What does all that do? I swear this is easy, so just pay attention. The first ‘source’ tag is the location of the MP4 video on your site, while the second ‘source’ tag is the location of the ogv file (Theora) on your site. So FF and Webkit will see these videos and play them no problem. But what about the other browsers? That is where swfobject.js and Flash come in. I’m assuming you know what to do with swfobject, because it has become the common way to get Flash onto a site.
For some reason, the HTML5 video tag was scaring me. But once I got it to work, I went…”That’s it? Well hell, I can do that!” I think you will, too. The main thing to remember is that you need four things to get it working: an MP4 video file, an ogv video file (Theora), the flv/swf, and swfoject.js. I said four, but if you do not have a video converter, then it is five. Once you have those you can pretty much copy and paste the code above, and change the names/locations of the files.
Something extra for you