How to add HTML5 video to your site

HTML5 brings a new video implementation that gives web designers another option than Flash. Devices such as the iPhone and iPad which don’t support Flash are readily compatible with HTML5 video making this a great option for designers who want to publish for a wider selection of platforms.

Current versions of the most popular browsers offer native support (visit http://caniuse.com/video for a compatibility chart). For publishers looking to support both compatible browsers as well as browsers which don’t currently offer HTLM5 video support a great script which contains code to support both can be found here: http://camendesign.com/code/video_for_everybody. If a browser supports the video element it’ll point it to the HTML5 video and if not it can fallback on a Flash based .swf player.

HTML5 will require both ogv video as well as a mp4 in order to support all browsers. A excellent (and free) utility to encode mp4 video from a variety of formats is Handbrake (http://handbrake.fr/). By the selecting iPod / iPhone preset, video will play on the iDevices as well as in regular browsers. To encode the .ogv format, MiniCoder (http://sourceforge.net/projects/minicoder/)  is another great (and free) utility which can also convert from a variety of different formats.

For complete instructions on implementing HTML5 video, visit http://camendesign.com/code/video_for_everybody.