We use cookies to provide you with a better experience. If you continue to use this site, we'll assume you're happy with this. Alternatively, click here to find out how to manage these cookies

hide cookie message
2,862 Tutorials

How to add HTML 5 video to your site

A crash course in the new web standard

We look at how to add HTML 5 video to your website

How to add HTML 5 to your site

The codecs you choose as your starting defaults should be dictated at least in part by what browsers are run by the majority of your visitors. Mark Pilgrim's Dive Into HTML 5 site has a detailed dissection of the competing and conflicting codecs, and it includes a handy chart that describes what current and next-generation browsers will support. Chrome is way out in the lead: The upcoming Chrome 6 will support all three major families of codec out of the box. As mentioned before, Firefox will support WebM in its upcoming Version 4.0, and it supports Theora, but not H.264, in Versions 3.5 and up. The most recent Internet Explorer 9 Platform Preview plays back H.264 natively; support for other codecs will most likely only be available as add-ons.

If you're planning on adding HTML 5 < video > support to your site, what's the best way to cut through this Gordian Knot of standards? Right now, the only viable long-term answer is to hedge your bets by doing the following:

  1. Encode your video in at least two different formats, with Flash being one of them as a universal worst-case fallback.
  2. Set up your < video > tags to degrade gracefully, so that browsers without support for a given tier of video will fall back to whatever else is available.
  3. Test your site tirelessly - not just with multiple browsers, but with multiple versions of individual browsers and on as many different platforms as you can: desktops, laptops, smartphones, etc.

Conversion tools

Assuming you've decided which codecs you will use to run videos in HTML 5, you then have to convert your video into that format. There are several tools available.

H.264 tools
Because H.264 is already a broadly used standard, odds are that whatever professional-grade program you have for creating video (such as Adobe Premiere or QuickTime Pro) will support exporting in that format. That said, there are also several open-source/free H.264 encoders available. For example, the ffdshow library, packaged for Windows as the 'ffdshow tryouts' codec pack, or the stand-alone programs Handbrake and Avidemux.

Note that your use of any of these tools must conform to the licencing requirements for H.264. Using an open-source implementation of H.264 doesn't absolve you of this. Generally, if you're re-hosting video through a provider who already has a licencing agreement (for example YouTube), or you're not creating video 'where there is remuneration for the title distributed', you won't have to pay anything. But you still need to sign a licence agreement with MPEG LA to use H.264 or host your content with a third-party provider that already has one.

NEXT PAGE: Theora and WebM tools

  1. Introduction
  2. The codec conundrum
  3. Theora and VP8
  4. How to add HTML 5 to your site
  5. Theora and WebM tools
  6. Using the < video > tag
  7. Falling back to Flash

IDG UK Sites

Nokia branding killed in place of 'Microsoft Lumia': Windows Phone moves into new era

IDG UK Sites

Why you shouldn't buy the iPad mini 3: No wonder Apple gave it 10 seconds of stage time

IDG UK Sites

Halloween Photoshop tutorials: 13 masterclasses for horrifying art, designs and type

IDG UK Sites

Should you update your iPhone or iPad to iOS 8? iOS 8.1 brings back Camera Roll, adds Apple Pay in...