Easy Embedding of HTML5 Video on a Drupal Site

Submitted by Open Source Catholic on Thu, 08/05/2010 - 11:19am

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:

I set up a filefield with which I can attach an m4v file to a piece of content.
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:

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.
Internet Explorer versions 8 and below will fall back to Flash. Not ideal, but that's how it is.
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

Ugh... can't get an Input

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

Advancing the faith.

Permalink Submitted by Open Source Catholic on Thu, 08/05/2010 - 11:31am

I really find YouTube w/HTML5

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

Permalink Submitted by Jason V. on Thu, 08/05/2010 - 12:39pm

Agreed - it's refreshingly

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.

Permalink Submitted by Open Source Catholic on Thu, 08/05/2010 - 2:14pm

http://drupal.org/project/vid

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.

Permalink Submitted by ekes on Thu, 08/05/2010 - 3:03pm

Patent encumbered or not, it

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.

Permalink Submitted by Open Source Catholic on Thu, 08/05/2010 - 4:01pm

ffmpeg is your friend. I

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.

Permalink Submitted by ekes on Sun, 08/08/2010 - 5:57am

Unfortunately, ffmpeg is my

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

Advancing the faith.

Permalink Submitted by Open Source Catholic on Sun, 08/08/2010 - 6:45am

Wow... I just did some

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.

Permalink Submitted by Open Source Catholic on Thu, 08/05/2010 - 11:51pm

see transliteration,

see transliteration, filefield paths ...

Permalink Submitted by Anonymous on Thu, 09/09/2010 - 10:03pm

I could use something like

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.

Permalink Submitted by Open Source Catholic on Sat, 10/02/2010 - 6:29am

Firefox, Opera and Chrome

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.

Permalink Submitted by bganicky on Fri, 08/06/2010 - 3:27am

While this is true, from an

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.

Permalink Submitted by Open Source Catholic on Fri, 08/06/2010 - 5:18am

While this is true, from an

Permalink Submitted by Hair straighteners on Fri, 08/13/2010 - 4:22am

Thus I would really like it

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

Advancing the faith.

Permalink Submitted by Open Source Catholic on Fri, 08/13/2010 - 8:32am

Is this still the case? I

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

Permalink Submitted by rekzkarz on Wed, 09/08/2010 - 8:19am

Unfortunately, this has

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.

Permalink Submitted by Open Source Catholic on Wed, 09/08/2010 - 8:31am

Hiya OSC... thanks for the

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.

Permalink Submitted by Jerry Witt on Mon, 10/25/2010 - 10:23pm

I can get that to work (and,

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.

Permalink Submitted by Open Source Catholic on Mon, 10/25/2010 - 11:05pm

Hey, Thanks for a great

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)

Permalink Submitted by Jake Roufa on Sat, 10/30/2010 - 8:54pm

I've actually had a ton of

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

Advancing the faith.

Permalink Submitted by Open Source Catholic on Sat, 10/30/2010 - 9:29pm

What release did you use with

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...

Permalink Submitted by Jake Roufa on Sat, 10/30/2010 - 9:56pm

Actually, it looks like I'm

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.

Permalink Submitted by Open Source Catholic on Sat, 10/30/2010 - 10:06pm

I followed your instructions

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.

Permalink Submitted by Jake Roufa on Sat, 10/30/2010 - 11:20pm

Aha! You've run into reason

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.

Permalink Submitted by Open Source Catholic on Sat, 10/30/2010 - 11:41pm

Good catch! After changing

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

Permalink Submitted by Jake Roufa on Sat, 10/30/2010 - 11:51pm

Nevermind! :) I've got it

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!

Permalink Submitted by Jake Roufa on Sun, 10/31/2010 - 9:45pm

Awesome! Sorry I couldn't pop

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.

Permalink Submitted by Open Source Catholic on Sun, 10/31/2010 - 11:24pm

Be mindful of this code,

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! :)

Permalink Submitted by Jake Roufa on Tue, 11/02/2010 - 3:37pm

So, after a few more

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.

Permalink Submitted by Jake Roufa on Wed, 11/10/2010 - 5:51pm

Very nice rework of the code

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.

Permalink Submitted by Open Source Catholic on Wed, 11/10/2010 - 10:25pm

Thanks for the tip about

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

Permalink Submitted by Merle Fyshwick on Fri, 08/26/2011 - 12:54pm

Thanks! I am running into one

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?

Permalink Submitted by Jake Roufa on Thu, 11/11/2010 - 6:21pm

Any thought on how to get

Any thought on how to get this working in D7?

Permalink Submitted by SekouKhalifa on Fri, 12/17/2010 - 8:53pm

Haven't looked into it much

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.

Permalink Submitted by Open Source Catholic on Fri, 12/17/2010 - 10:57pm