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:
- Encode your video in at least two different formats, with Flash being one of them as a universal worst-case fallback.
- 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.
- 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.
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.
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