For the past year, I've watched the HTML5 <video> element debate (mostly over video formats/containers) with a great interest—I abhor having to use Adobe Flash on my sites to embed video, especially since that means many videos don't work on my Linux workstation (which doesn't have Flash), or on my iPhone/iPad.

The HTML5 <video> element (and similarly, the less-supported <audio> element) promises to take away the stress of having to have flash players, FLV-encoded video, etc. just to show a viewer a non-static piece of content.

In its simplest form, you can add the following code to embed a video on your page:

On my Drupal sites, I've been wanting to be able to simply grab an m4v video exported from iMovie, QuickTime, or straight from my camera, attach it to a post via a filefield, and have it display. In the old days, I would use SWFTools to embed the video using Flash.

I've found a solution that, in my opinion, is much more elegant, using the <video> element, with a Flash fallback for Internet Explorer:

  1. I set up a filefield with which I can attach an m4v file to a piece of content.
  2. I enabled Custom Formatters (an excellent Drupal module for CCK), and set up a simple formatter for this filefield with the code below:

Download this video (MP4)

Two caveats:

  1. FireFox = no-go. This probably deserves a post of its own, because I think the Mozilla people are shooting themselves in the foot on this issue, and might drag down the adoption of the <video> element, but they're basically not going to support H.264/m4v video. So if you want to support FireFox, you'll have to recompress your video again and upload it to another filefield as an OGG Video, then make a more advanced PHP custom formatter to add in a link to that filefield.
  2. Internet Explorer versions 8 and below will fall back to Flash. Not ideal, but that's how it is.
  3. For the video to play across all devices, you have to encode it using the H.264 baseline profile... you can encode with higher settings, but then the iPhone, iPad, or both might not play the video.

Luckily, though, including a download link to the video will allow even the most ancient browser the ability to at least download the video for viewing apart from the browser.

Getting this working in FireFox

To get FireFox support, you'll need to modify your workflow a bit. For the video filefield, make it a two-value filefield, then set up a new Custom Formatter with the 'Advanced' editor. Use the code below (PHP) for your custom formatter, and name it something like 'Universal HTML5 Video Formatter.' Then attach an M4V file as the first filefield item, and the OGV file as the second. Voila! Every browser back to the good ol' days of IE6 is supported!

<?php // Define video file locations $m4v_video = ‘/’ . $element[‘#node’]->field_video_podcast[0][‘filepath’]; $ogv_video = ‘/’ . $element[‘#node’]->field_video_podcast[1][‘filepath’];

// Print HTML5 video code print ‘<div class="html5-video-player">

Download this video: MP4 | OGV </div>’; ?>

Note: I am using the 'field_video_podcast' field for my nodes - your field name might be different. Also, I used Oggifier as a GUI for ffmpeg2theora, though I still maintain it's stupid to have to make two video files just to support FireFox, standards be darned. Especially when FireFox won't accept an .ogv filename with spaces (see my comment below)!

Dive into HTML5 - Video - a great source for more info on this topic.