Quick tip: Converting Video to Ogg, webM and other HTML5 formats

So you've seen all the hype around HTML5 video and you like the sound of native video without plugins on your own site. But where do you start? How do you get it all working?

Converting Video to "HTML5" Video

First off you need to convert (encode) your source video file into the formats supported by current browsers. Simple right? Wrong.

As of today (October 2010) each browser supports different set of video codecs which means we need to encode the same file multiple times for each Video (hint: check out our "What's My IP Address?" App - fmbip.com for the most up to date information).

The multimedia codecs we're concerned with are:

• Ogg Theora - Firefox & Opera
• H.264 - Safari, Chrome and - potentially - IE9
• webM - Opera, Chrome, Firefox and potentially IE9

We also need to convert to Flash to provide a fall back for older browsers.

Converting Video Files to "HTML5" formats

The best tool I've found for converting video files to "HTML5" formats is the Miro Video Converter produced by the team over at Miro (the "amazing open-source, non-profit video player").

Miro's desktop interface allows you to drag and drop files and then quickly convert them to all the formats we need (minus Flash). Simply process your source file to the other formats and your done.

Display the Video on your site

To get the video working on your site you'll need bullet-proof HTML markup to ensure maximum compatibility. Never fear however, as there are variety of tools out there that allow you to generate this quickly and easily.

The web development team here at Deep Blue Sky recommends VideoJS which offers an Embed Code Builder which utilises the javascript independent "Video for Everybody" syntax to quickly create the markup you'll require for your video tag.

However, as the name implies, VideoJS also offers a javascript library which enables you to quickly and easily skin your player to mirror YouTube, Vimeo and other popular services. Nice.

Simply follow the instructions on the site, provide the correct paths to the video files we created earlier (don't forget the Flash!) and drop the whole lot into your site. It should all work, if not then read the docs and recheck your video files for errrors.

Caveat - don't try this at home kids

Obviously this tutorial is a quick guide and as such is an oversimplification of what is a complicated and wide ranging topic.

Therefore, I strongly recommend that you familiarise yourself with the topic of native video before you attempt to add it to your website.

For further reading why not check out the Video chapter from http://introducinghtml5.com/ by Bruce Lawson and Remy Sharp, or contact the team of web developers at Deep Blue Sky for more advice?

Happy encoding!