flash

Easy Embedding of HTML5 Video on a Drupal Site

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:

<video src="video-file.m4v"></video>

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:

Stupid Flash – Making Menus Appear Over Flash Video/Content

If you are using mega menus, like we use on archstl.org, then you need to be careful when posting Flash content to your website; if the content is anywhere around one of the mega menu flyouts, then the flash content will cover the menu in certain browsers (notably, IE and older FireFox versions).

To fix this, add the following code to your flash object embed:

Inside the <object> tags, with your other <param> tags: <param name="wmode" value="transparent">

Inside the <embed> tag, with the other value:key pairs: wmode="transparent"

Syndicate content