Recent comments

Drupal 6 and HTML 5 Video

firebus's picture

I was asked to create a video content type for a site with the following requirements:

  • Support for browser, iPad, and iPhone
  • Fit video to browser width onLoad and onResize
  • Autoplay, no controls
  • Configurable thumbnail/poster image
  • Host videos on-site (not external embed)

I was more or less completely ignorant about HTML5 video, and how it's supported in Drupal 6.

I started out by investigating a couple of contrib modules: Video and VideoJS.

Video uses ffmpeg and other command-line transcoding tools to take an uploaded video and transform it into the formats you need to provide cross-platform HTML video with flash fallback (for IE). It also provides a CCK formatter and integrates with a variety of other players. It's well-designed and has pretty decent documentation. Unfortunately, it really doesn't work. All required presets for transcoding failed out of the box, and required patching to get them working. The CCK formatter failed to play nicely with flowplayer (the flash player I'd chosen for fallback). There are a LOT of patches in the issue queue. The stable release is a beta, but that might be a little too optimistic.

VideoJS just provides a CCK-formatter (and Views integration) and some jQuery integration. You do your own transcoding, and upload multiple files to a content type. Unfortunately, VideoJS is also broken in the current release, and patches are required to get it to play nicely with flash players.

In the process of researching these two modules, I also educated myself on HTML5 generally, and found a couple of great resources with documentation on how to provide maximally compatible video with the minimum number of video files, and minimum amount of code:

Given the problems with Video and VideoJS, and the simplicity of the requirements, I decided that instead of trying to find a set of patches to get an existing module to work, it would be more efficient to create a custom module. I reused the approach of VideoJS to creating a CCK formatter, but without all the (excellent, but not working yet) bells and whistles of VideoJS and working flowplayer integration.

I also found I had to patch the Flowplayer module to support the wmode parameter of the flash embed code (this site needs a transparent player to avoid obscuring navigation elements).

There are a couple of other promising looking modules for HTML5 video in Drupal 6, including Video for Everybody (which doesn't have a release yet) and MediaFront (which seemed like it did a lot more than I needed).

In conclusion HTML5 video itself is not that hard, but doing it on Drupal is still a DIY prospect.


Comments

Any drawback to doing it by hand?

Is there any drawback to just inputting the code into the body of a particular piece of content & adding the required js/stylesheets to the theme?


firebus's picture

Drawbacks

Sure - the same drawbacks you'd have hand-coding anything:

- It's hard for non-coders to add content (one of the main value-adds of a CMS is that non-coders can add content
- If you later discover that you need to change the way things work (to keep up with new browsers or devices, because you found a bug, because you found a better way to do it) you have to manually edit every single piece of content by hand to make the change

I'm sure we can think of more drawbacks.


MediaFront

It's up and running now and seems to work well, just FYI. Good post, btw. =)


HTML Video

You may try out the HTML5 Video module for Drupal 6.

It defines a new content type for html5 videos, supports uploading of relevant files, or linking to external files. It should work right out of the box.


firebus's picture

jwplayer FTW

jwplayer does everything i need for this project.

the redundantly named jwplayermodule module seems like it only has an input filter method of embedding documented, so i'm still calling swfobject myself (without the SWFTools module) to embed jwplayer myself (without the jwplayermodule module)

but jwplayer is the first i've found that can do:

  • autoplay
  • no control bar
  • arbitrary poster image (this was a hassle with flowplayer - i had to set up a playlist with the poster as the first item and the movie as the second)
  • call a function when play completes (flowplayer was broken here on Firefox)
  • replace the video tag if flash is available (technically swfobject is doing this, but probably jwplayer's embed can do this too)

yay.


standards

are people just focused on providing mobile content to the iPhone and iPad and ignoring the other mobile and pad/slate platforms?


firebus's picture

Pragmatism

In this project that I'm working on, yes specifically. We only care about iStuff.

In general, Android, especially Android 2.3, supports the same kind of encoding and embedding as iStuff does, so if you're supporting one you're probably supporting the other. Each has some bugs in older versions with the video tag.

However, it's really easy to figure out what each version of iPad/Phone supports in terms of codecs, aspect ratios, etc. And it's easy to test with the free SDK if you have a mac to test on.

Android phones are all over the place, different devices support different things in different ways and have different carrier restrictions, there's no easy way to test without having one of each device.

Probably google will eventually drop support for H.264 on Android devices, and then we'll have to see if people bother to make a webm source available.

In general, IMO, HTML5 video should be a standard that devices that don't support Flash move towards supporting.


Hi, Did you try using

Hi,
Did you try using anything other than ffmpeg for transcoding?

Also how did you deliver the media based on the browser. A post on that would be greatly helpful

Thanks


firebus's picture

transcoding and delivery

Hi Aj,

Right now I've bumped the transcoding responsibility back to video production, although I might give it another try in ffmpeg if they have trouble getting good results.

Originally, when I decided to roll my own video, I was implementing Video for Everybody directly.

VfE suffers from a lot of bugs in the HTML5 implementation in various browsers (especially FireFox 3.6 and ogv support). That's why VideoJS exists - it uses a lot of script to try and smooth over those defects.

I've now switched to delivering Flash with HTML5 fallback instead of HTML5 with Flash fallback. In this case, we deliver Flash to all browsers that support it, only showing HTML5 if there's no Flash.

If you assume that all desktop browsers support flash, then you can get away with a single video file! One H.264-encoded MP4 will work for both Flash and most devices that don't support Flash.

So now we print a video tag on the page, and use swfobject.embedSWF to *replace* the video tag with a Flash object tag if flash is supported.

Here's a really slow and annoying video tutorial on the topic. I wish everyone writing video tutorials was required by law to provide a text transcript, and a way to copy the code.


Really happy you made this

Really happy you made this post. I've been tasked with something really similar, and have struggled and wasted lots of time exactly as you have. The Video module it's riddled with problems, and the VideoJS module is right there with it.

After trying every conceivable way to make Video or Videojs modules work, I gave up went to the SWF Tools module. It's unfortunately not an HTML5 solution with fallback, as I am trying to achieve right now, but it does do a fantastic straight-forward job of playing video files you have in your custom fields, and providing an easy to understand interface for configuring it.

The Video modules configuration, is nearly a whole entire CMS on it's own. It seems pretty out of hand and all over the place. That goes along with their documentation. I would love to help out with fixing their documentation, but I don't even know where to begin. The module would need to be working to begin with.

My plan for now, is to continue with my SWF Tools implementation, and check back on any new development with the Video module. Hopefully they get some bugs worked out in the coming weeks. If that does work out, I would love to do a write up on it and share it with everyone else that has a similar goal.

Wish I had the PHP chops to jump in there and figure out what's wrong with it.


firebus's picture

Flash with HTML5 fallback

swfobject works real good for Flash with HTML5 fallback. I couldn't get it working with the SWFTools module - couldn't figure out how to get SWFTools to call swfobject.embedSWF the way i wanted it to.

But in brief, and this is the subject of the video tutorial two posts up, you make an HTML5 video tag with an id.

Then you use swfobject.embedSWF to *replace* the video tag with a flash object tag if and only if flash is supported by the client.

Real nice, and I think a better solution for HTML5 video, though less politically correct, given the spotty support for HTML5 among current browsers. I fully expect to change my mind once IE9, FF4, etc. are released.


Have you changed your mind?

Now that FF4 and IE9 are out, have you had a chance to see if your solution is still the best? Thanks!

-Frederico


firebus's picture

nope!

i haven't tested HTML5 in either browser. I do suspect that performance is better in both. However, I still maintain that having flash as the first choice, and HTML5 as the fallback is the better option since in all cases, if there's flash, flash is still a more predictable user experience.

The fact that there are 2 new browers on the scene only makes the HTML5 option more fragmented and harder to support across all possible viewers.


Powered by Drupal - Design by Artinet - Amazon Affiliate