HTML 5 Developer's Dilemma - Which Video File Format to Convert and Support

Tweet

Until recently, the only way to embed video in web pages was using third-party plugins like Silverlight, Flash and QuickTime. HTML5 has made it easier to include multimedia in your web pages without any plugins, by just using the <video> element. However support for video and audio file formats varies across browsers. HTML5 capable browsers support different video formats.

They are:

• Theora (.ogg, .ogv) - The free and open source container format from the Xiph.org foundation, for the open source Theora codec. Results in lower quality than H.264 and uses the application/ogg MIME type and the video/ogg video attribute type
• MP4/ H.268 (.m4v) - The compressed container format for the H.264 codec, with high definition support and uses video/mpeg MIME type and the video/mp4 video attribute type
• WebM (.webm) – Open source container format supported by Mozilla, Opera, Adobe, and Google., compressed by VP8 codec and uses the video/webm MIME type and the video/webm video attribute type

A standard video format has not yet emerged. So as a web developer, to make sure you handle all major web browsers and that as many users  as possible can see your content, you have to encode video in different formats.

Let’s us first quickly see what browsers support what file formats

Looking at the chart above, one can conclude that if you serve ‘at least’ two different formats: MP4 and WebM or MP4 and Theora, you can handle all the ‘latest’ browsers. The easiest way to provide content in different formats is to convert your video format into Mp4, WebM or Ogg formats

Free Encoding Tools to Convert Video Formats

Here are some free encoding tools to convert video formats:

• HandBrake – Open source transcoder for generating .mp4 files.
• Firefogg - Firefox extension for performing Ogg encoding.
• Miro Video Converter – Converts video files to Theora Ogg, MP4, and WebM
• Media Converter -  Convert files to MP4, Theora Ogg, Flash FLV etc.
• Vid.ly Converter -  Converts your source video into 22 output renditions to cover more that 6,000 devices and browsers in market.
  This tool was shared by Elijah Manor in the comments section

Using HTML 5 with a Flash Fallback

Faced with these format differences, a web developer should prepare multimedia in different formats (as we explored above) and also support old browsers that do not support HTML 5.

Here’s an example of how you can write your markup

As you can see, in addition to different file formats, we have a fallback to a Flash video and a further fallback to an Image, in case the flash plug-in is also not installed. While providing Flash support, Firefox uses the `data` attribute above and IE/Safari uses the param attribute, hence we have included both.

Tweet

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.