DeepBlueSky Blog
We show you how to quickly and easily convert video files to Ogg Theora, webM and H.264 "HTML5" video formats.
-
Bullet-proof video markup
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 findmebyip.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.
Personally I recommend VideoJS which offers an Embed Code Builder which utilizes the javascript independent "Video for Everybody" synxtax 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 futher reading why not check out the Video chapter from http://introducinghtml5.com/ by Bruce Lawson and Remy Sharp?
Happy encoding!
4 Comments on this post
Speak to an Expert now on 01225 444 674
Talk to Us
David said “Update” years ago
Evgeny said “Miro” years ago
Chainarong said “Fantastic Solution” last year
Billy said “Miro Converter doesn't seem to export in Widescreen” last year