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:

<div class="html5-video-player">
  <video controls="controls" preload="none" width="640" height="360">
    <source src="[site-url]/[filefield-filepath]" type='video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;'>
    <object width="640" height="384" type="application/x-shockwave-flash" data="[site-url]/sites/all/libraries/flowplayer/flowplayer-3.2.2.swf">
      <param name="movie" value="[site-url]/sites/all/libraries/flowplayer/flowplayer-3.2.2.swf" />
      <param name="allowfullscreen" value="true" />
      <param name="flashvars" value=' &quot;[site-url]/[filefield-filepath]&quot;, &quot;autoPlay&quot;:false, &quot;autoBuffering&quot;:false, &quot;canvas&quot;:{&quot;backgroundColor&quot;:&quot;#000000&quot;}, &quot;scaling&quot;:&quot;fit&quot;}}' />
    </object>
  </video>
  <a href="[site-url]/[filefield-filepath]">Download this video (MP4)</a>
</div>

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">
  <video controls="controls" preload="none" width="640" height="360">
    <source src="'
. $m4v_video . '" type="video/mp4" />
    <source src="'
. $ogv_video . '" type="video/ogg" />
    <object width="640" height="384" type="application/x-shockwave-flash" data="/sites/all/libraries/flowplayer/flowplayer-3.2.2.swf">
      <param name="movie" value="/sites/all/libraries/flowplayer/flowplayer-3.2.2.swf" />
      <param name="allowfullscreen" value="true" />
      <param name="flashvars" value=\'config={"clip": {"url": "'
. $m4v_video . '", "autoPlay":false, "autoBuffering":false, "canvas":{"backgroundColor":"#000000"}, "scaling":"fit"}}\' />
    </object>
  </video>
  Download this video: <a href="'
. $m4v_video . '">MP4</a> | <a href="' . $ogv_video . '">OGV</a>
</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.

Comments

Open Source Catholic's picture

Ugh... can't get an Input format to not replace [site-url] with http://www.opensourcecatholic.com/

Advancing the faith.

Jason V.'s picture

I really find YouTube w/HTML5 to be a more pleasant video-watching experience (on Ubuntu Linux / Google Chrome Browser). Don't really care for Flash for video playback, and won't miss it. Check out the YouTube HTML5 beta:
http://www.youtube.com/html5

Open Source Catholic's picture

Agreed - it's refreshingly lightweight, compared to the flash version...

What I don't understand is why it's so easy to go fullscreen on the iPad and iPhone, but I can't do fullscreen natively in Safari on my Mac :-/

Advancing the faith.

ekes's picture

http://drupal.org/project/video_for_everybody

Then you get the lot, but yes you will need to make an ogg as well. Remember as far as I'm aware if you're in the States you need to pay to make H.264 as it's patent encumbered.

Open Source Catholic's picture

Patent encumbered or not, it works well across Safari, Chrome, and IE9 so far... Ogg only enjoys full support in FireFox, and half support in Chrome (not preferred).

I have a feeling Ogg (or Google's new WebM format) might not be a panacea either :( Plus, they're hard to convert for someone who's not as technical as an average web developer... I can't ask my users to submit an OGV file to me—they all work with quicktime or WMV...

Advancing the faith.

ekes's picture

ffmpeg is your friend. I wouldn't expect users to have to produce flv's let alone anything else. Let them upload content and transcode it so it can be embedded.

Open Source Catholic's picture

Unfortunately, ffmpeg is my friend on my dedicated server, but not on the plethora of sites I maintain on shared hosting :(

Advancing the faith.

Open Source Catholic's picture

Wow... I just did some testing with some OGV files (to get everything working in FireFox), and I found that FireFox for some insane reason requires the .ogv file to have no spaces... I had a space in the file name, and FireFox refused to play it. Take out the space, and it plays.

While I understand that having spaces in URLs is not best practice, so many people do it that it doesn't make sense to not account for them...

Advancing the faith.

Anonymous's picture

see transliteration, filefield paths ...

Open Source Catholic's picture

I could use something like that, but it's still rather annoying to have to go even further just to support FireFox and its ideological slants. The harder it is to support FF, the less likely many are to care.

Advancing the faith.

bganicky's picture

Firefox, Opera and Chrome supports open source (and patent free) Theora video in OGG container. So it's just Safari and IE9 who don't and who are going to support patent encumbered codec only. :( Not surprised tho, we're basically talking about Apple and Microsoft.

Open Source Catholic's picture

While this is true, from an end-user's (or developer's) perspective, nobody uses Opera, and IE/Flash compatibility are essential to traction with HTML5 video. Everything the other browsers can do to alleviate the stress involved in video workflows is invaluable.

At the very least, FireFox should be able to fall back to flash if it doesn't like the M4V file.

Advancing the faith.

Hair straighteners's picture

While this is true, from an end-user's (or developer's) perspective, nobody uses Opera, and IE/Flash compatibility are essential to traction with HTML5 video. Everything the other browsers can do to alleviate the stress involved in video workflows is invaluable.

Open Source Catholic's picture

Thus I would really like it if FireFox/Mozilla were to allow MP4/H.264... :(

Advancing the faith.

rekzkarz's picture

Is this still the case? I had heard on the radio that h264 was going to be allowed to be used as a more 'open format'. I can't say that means it's open to the public, but my understanding was that I could use it on my site.

I also had not read that Firefox would not support it, but you have to use OGG & not Flash? I thought the recommended playback was HTML5 video tag & fallback for Flash?

It should be evident that I'm over my head here!

http://rekzkarz.com

Open Source Catholic's picture

Unfortunately, this has become a hot political issue, and even though the H.264 is more open, it's still not an open source, completely free codec. Therefore Mozilla and a few other groups are vehemently against it.

Advancing the faith.

Jerry Witt's picture

Hiya OSC... thanks for the article. I wonder if you have seen this page about HTML5 video. http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-html-5-v...

The main page covers the same ground as you did, but nestled in the comments section is a note from Daniel J Wilcox that outlines a way to only use H264 video but get that to play through the Flash plugin. Suddenly all browsers can use one video format. I have contacted the author and I am going to play around and see if I can get this to work.

I was just wondering if you had seen or considered it.

Open Source Catholic's picture

I can get that to work (and, indeed, that's what I do on a couple sites)... but the problem is that I'm still required to do something extra to get the video to work in all browsers—and on top of that, part of the answer is still Flash... which I am trying to avoid anyways :(

Advancing the faith.

Jake Roufa's picture

Hey, Thanks for a great article! I'm having trouble though, getting tokens to work in the custom formatter I set up. Also, the Flash fallback doesn't seem to work... Flowplayer loads, but the video does not.

Have you had any of these same issues with the latest Drupal, Token and Custom Formatters versions? (6.19, 6.x-1.15 and 6.x-1.4 respectively)

Open Source Catholic's picture

I've actually had a ton of trouble with the latest Custom Formatters release; that could be causing the issue...

Advancing the faith.

Jake Roufa's picture

What release did you use with this post? I think I may use that for now, until I can get it to work right with the latest release...

Open Source Catholic's picture

Actually, it looks like I'm on 6.x-1.4... are you sure you have your field name entered correctly in the 'advanced' php editor?

Also, check the HTML that's generated to see if you're missing a leading '/', or something like that.

Advancing the faith.

Jake Roufa's picture

I followed your instructions to a T. Check out http://drupalbin.com/16502 for the exact code I'm using in my custom formatter. There's also a link to this post and my test page on my dev server.

Open Source Catholic's picture

Aha! You've run into reason number three why I hate FireFox's implementation of the HTML5 video implementation - you have a space in your video's filename: TheAdjusted IssueNo1-SitePreview853x505.ogv. Therefore, FireFox won't find the file. It has to have an underscore or dash, if anything...

Dratted FireFox :-P

Advancing the faith.

Jake Roufa's picture

Good catch! After changing that it still doesnt work though! :(

Jake Roufa's picture

Nevermind! :) I've got it working now at http://dev.jacobroufa.com/node/2 and tested on Chrome, Firefox, Safari, Opera, IE 8 and the iPhone/iPad. Haven't yet tested on IE7 or Android, and the Flash loads slow because my server is slow... But it works! Also, updated my code in that DrupalBin link.

Thanks again for such an awesome solution!

Open Source Catholic's picture

Awesome! Sorry I couldn't pop back in until now to check on how you're doing. Glad you could get it working, and thanks for linking to DrupalBin. Will be helpful for all to see.

Advancing the faith.

Jake Roufa's picture

Be mindful of this code, however, as it doesn't work properly in Views. I have to display Nodes instead of Fields. I believe that has to do with this: $element['#node']->field_video_podcast[0]['filepath']. I need a better understanding of Custom Formatters though, before I'm able to find a better solution.

I hope you don't mind my continual posting on this thread... You've come up with a more flexible, lightweight and better working solution than anyone else in the community and I really hope to improve on it, work out the bugs and document it for the rest of the community to make use of. I can't believe that there is still no module that provides this functionality as well as you do here. But after seeing this, I don't know that a module is necessary... just a good tutorial on the process as you have provided.

Thanks again! :)

Jake Roufa's picture

So, after a few more revisions, I think I've finally got it! The issue with Firefox wasn't the space in the name, but the extension. It works with .ogg but not with .ogv files. Also, I needed to move the files outside of web root, for security purposes, as I'll be using Ubercart to sell field access for some. For awhile, I wasn't able to get it to print any path but "/../files/video.*" which wouldn't play as adding that to the url isn't a valid path. So, thinking about how other fields do it, I took a cue from Imagefield and did the same as what they have done using file_create_url($element[*]['#item']['filepath']) where * is 0 for mp4 and 1 for ogg. This not only fixes any potential issues with filesystem paths, but also removes the need to preface the $m4v_video and $ogv_video variables with a url. Also, it makes this formatter truly universal in that it can be used with any filefield with two uploads, no matter the name of the field.

See http://drupalbin.com/16621 for the full code.

Open Source Catholic's picture

Very nice rework of the code I used! I'll have to take a deeper look at what you've done.

At some point, I might put this into a simple module, as I'm still not happy with most of the other Drupal solutions.

Advancing the faith.

Merle Fyshwick's picture

Thanks for the tip about *.ogvs needing to be renamed *.oggs! I just renamed them, and now they work!

Jake Roufa's picture

Thanks! I am running into one issue still, and this is a big one for me. When I put the video field into a view and assign the custom formatter to it, the MP4 video displays just fine but when viewing in Firefox the OGG video isn't found. Any thoughts?

SekouKhalifa's picture

Any thought on how to get this working in D7?

Open Source Catholic's picture

Haven't looked into it much yet, but it's entirely possible to get it going pretty easily. The Fields API would have to be taken into account, of course, so some of the code would need changing.

Advancing the faith.

SekouKhalifa's picture

Thanks for your reply and I'm really no good at coding but here's what I tried http://drupal.org/node/1001816.

Open Source Catholic's picture

Great... looks like Google is going to drop support for H.264 in Chrome. Grr... back to square one.

Advancing the faith.

Isaac Foxx's picture

mp4 is more cross-compatible than m4v. Ive implemented a video education site using only mp4 files and got great results.

Open Source Catholic's picture

True, but it shouldn't be too big an issue; I haven't had trouble across any of the browsers I was testing :)

Advancing the faith.