Suggestions for HTML 5 video support

I've got this to work. It was a lot of work, but it works.

It's partly complicated by how you define "HTML 5 video." For our case, we're only supporting MPEG-4-formatted video files. Firefox and Opera don't support these, though, so they have to fall back to Flash even though they technically support the <video> tag.

However, this module is configured to try to display MPEG-4 videos using QuickTime embedding. So with some hook_theme_registry_alter() hijinks, we override the module's theming for "QuickTime" videos with our own, which use the <video> tag. (There might be a more elegant way to go about that, but it works for us.)

Then there's the Flash fallback. Basically, we drupal_add_js() a JavaScript file which attempts to detect if the browser supports <video> with MPEG-4, and, failing that, if the browser supports Flash. If no on the former and yes on the latter, we use jQuery to find all the <video> tags on the page and replace them with FLV Player instances (which, despite its name, plays MPEG-4 videos just fine) using the attributes from the <video> tag (or its wrappers) to determine size, video SRC, poster image, etc. (I like FLV Player over "heavyweight" alternatives like Flowplayer because it's quick-loading and not burdened with a lot of unnecessary features while still offering a good degree of customizability. Also, it's completely free.)

This technique works great on browsers that support MPEG-4 with <video> and works tolerably on those that don't support <video> at all. For those that don't support MPEG-4 with <video>, it's a bit ugly because first they briefly see their browser's video player with a "I can't play this video" error icon before the JavaScript can run and replace it with a Flash player - with a completely different interface… It's a trade-off, but such is the current state of HTML 5 video.

Good stuff, we will soon to support HTML5 videos.

HTML5 discussion is on #938728: Need to generate several different formats with Zencoder