Inspired by Google's WebM project, I decided to port Monochrome to HTML 5 video. That required the following:
-
Transcode all videos into three formats instead of one: Flash Video in FLV, H.264 + AAC in an MP4 container and Theora + Vorbis in an Ogg container. The Flash video is for backwards compatibility (i.e. IE).
-
Replace the Flow Player with an HTML 5 video tag (but keep it as a fallback).
-
Test in several browsers.
Regarding the first and second points, there's enough written on the incompatibilities and workarounds to make any further words superfluous. See Video on the Web - Dive Into HTML 5[a] for a thorough discussion on the matter.
Some notes on the third, though.
-
Safari 5 for Windows will not play any video, except Flash. If plugins are disabled, nothing is shown.
-
If the
preload="none"attribute is set, Chrome will not buffer anything - even when playing. This - predictably - results in choppy playback. Best bet is to just not have any preload setting, letting the browser use its default.
H.264 Patent Issues
In my article about video editing with Blender I briefly mentioned that H.264 was patented and required licensing fees to be paid. Since I only distributed video in Flash video format back then, it wasn't a big issue. But now with HTML 5, the issue has come up again with a vengeance.
Since H.264 is patented technology you may have to pay a license fee if you distribute H.264 video over the web. However, if you don't make any money on your website (no ads, no nothing), then the MPEG-LA has waived the license fees until 2015. An overview of the H.264 license jungle is here[b].