Converting Files for HTML 5 Video

By | March 29, 2011

HTML 5 video is great but how do you get the files to be in the right format. And it doesn’t stop there. As you know if you’ve read my tutorial HTML5 Video | The Basics there are lots of issues with with browser vendors fighting over which codec to support so we have to serve up 3 differently encoded videos. So my question was “How do we do this?” because everything I’d read told me how to put the stuff onto the page but no-one told me how to get the files in the first place. So let’s start with my personal favourite (I don’t know why it’s my favourite it just is theres no reason like oh it look the best or it’s easier to implement, I just like the idea of it.)

Ogg Theora

So what can we use to change our .mp4 or .wmv files in to this open source format. The free evom will make Ogg Theora on a Mac through a great interface. On Windows and Linux the free VLC can convert files to Ogg and Ogg Convert is a good one for linux users. I’ve also used FireFogg which was great until I updated to Firefox4.

H.264 Video (MP4)

H.264 or MP4 works natively in Safari, in Adobe Flash, on the iPhone, and on Google Android devices and the easiest way to encode H.264 video is with HandBrake which is an open source, GPL-licensed application. It is available for Windows, Mac OS X, Linux. HandBrake comes in two versions: graphical and command-line versions.

VP8 (.webm)

Finally to change our files to the .webm format we have a few different options. Free Online WebM is easy to use and purely online. The one I’ve been using is Free WebM Encoder 1.2 which is just really easy to download and use.

All in one converter

So the final converter that I have just come across and downloaded is Miro Video Converter. This is an all in one converter that can create all the files you need for your HTML5 video tag to work cross browser. So this is the one I’m going to show you how to use. (Because it’s easy).

First open the program and you get this view:

html5 video encoder step 1

Then as it says you drag the file you want to convert into the the big box area.

html5 video encoder image2

As you can see it tells you what file you’ve chosen then you choose the format you want the file to be outputted in.

html5 video encoder image3

Next just click convert.

html5 video encoder image4

and thats it, nothing more to it. You can repeat this for your multiple versions of video files. Easy.

One thought on “Converting Files for HTML 5 Video

  1. Bartlett

    I am using Video Converter Assist. The program can also encode HTML5 video as easy as Miro Video Converter.


Leave a Reply

Your email address will not be published. Required fields are marked *