09 Oct 2009

Better Know a Module: Flashy

garfield's picture
Senior Architect and Consultant
11

Everyone knows the top-tier Drupal modules, but with over 4,000 modules available for Drupal it's no surprise that many useful modules go unnoticed. As part of its mission to make the web a better place, Palantir is presenting this series of articles on modules you haven't met that may yet get you a good night's sleep.

In part 1 of our 4,943 part series, we present: Flashy

About Flashy

Flashy is a fully GPLed Flash video wrapper. "So what?", I hear you say. There's no shortage of Flash video wrappers. However, there has been a shortage of supported GPLed Flash video wrappers.

Palantir has used a few different Flash wrappers before, and while most got the job done they all had a key problem: They weren't fully-Free. Some are Creative Commons Non-Commercial, which doesn't work for some of our clients as they are for-profit entities. Some have a somewhat interesting spin on the GPL, with a watermarked or overly-branded GPL version and a closed-source unwatermarked version and a license that says you can't get rid of the watermark. We decided to pass on that... We did manage to find one player that claimed to be GPL, but was so completely unmaintained (and a download link for the source wasn't available) that we decided to steer clear.

With no clear existing tool to use, we did the next logical thing: Write our own and release it for general use. The result is Flashy, a general purpose Flash video wrapper available independently of Drupal but with a clear integration module. Flashy was developed in collaboration with renowned Flash developer David Stiller, the author of several books on Flash and ActionScript development. Its biggest selling point is that it is 100% GPLv2+, the same license as Drupal, with no branding or strings attached whatsoever. The code is pure ActionScript 3, so you don't even need Flash Professional to edit it. All you need is the free compiler.

Using Flashy

The Flashy module itself is just a wrapper for the video player. In order to make use of it, the player needs to be given a video file to play. As we always favor building sustainable building blocks rather than one-off solutions, Flashy ships with two CCK formatters, one for Filefield and one for Link fields. That way, you can simply upload an FLV, F4V, or MP4 in a file field and it magically appears on the site, either on the node or in a View or wherever. Alternatively, if the file is hosted off-site (maybe for disk space reasons) you can just drop a URL into a Link field and have it display as well. You can see Flashy in action below (along with Palantir's Executive Puppy, Kiki, who is far less excited about Flashy than she should be).

Installing Flashy

The Flashy player itself is not included in the module, per Drupal.org policy. However, it's a single file that can be downloaded from the Google Code project and dropped into the module directory without any additional configuration. If you are using Drush (and you should be), Flashy provides a Drush command to automatically pull down the player.

drush flashy post-install

Boom! (With due apologies to Steve Jobs.)

In order to minimize the amount of duplicate code we had to write, Flashy does depend on a few external modules. First of all, it is object-oriented under the hood and uses the Autoload module to keep the amount of needed code to a minimum.

One issue we ran into during development is that sometimes the Flash player would appear on screen properly, but if we had multiple videos on screen at once they would sometimes work and sometimes not. It took us a long time to figure out why, but it turns out that jQuery (which Drupal uses) and the widely popular SWFObject library (which we were using to embed the player) have very subtle and nasty collisions in the way they handle page init and something in the way Flashy works triggered one of those collisions. Fail!

The solution was to replace SWFObject with a jQuery-native equivalent. Enter SWFEmbed, a jQuery-native Flash embedding utility. Like Flashy it is object-oriented, and in fact most of Flashy got pushed up to SWFEmbed. The goal is to make embedding flash-based content in Drupal dead-simple, as developers of new modules need only extend the SWFEmbed class and add what they need. All of the crazy cross-browser Javascript weirdness is handled automagically.

Although not required, it's also a good idea to install the getID3 module. If available, Flashy will use it to auto-detect the size of your video file (if it's a local file) and create the correct size player on screen. If it's not installed all videos will be shown at a default size.

Advancing Flashy

That's all there is to it! At least for now. Flashy itself has a lot of flexibility to rearrange controls, change the color scheme, and so forth that is not yet exposed through the Drupal module. In part that is difficult because CCK Formatters in Drupal 6 do not have support for configuration. However, there's still value to allowing some site-wide configuration, such as changing the color scheme or default video size or whether videos should play by default. All of that is possible, it just needs to have the necessary administration screens written. Flashy also has preliminary support for playlists.

The video player can handle XML-based playlist files in XSPF format, which can be uploaded to filefield as well and use another provided formatter. What would be even better, though, is to support multi-value filefields and generate a playlist file on the fly. That should be doable, but as of yet we've not had the opportunity to do it.

Are you up for it? Send in a patch to help make the simplest Free Flash player even simpler.

Comments

The Fightin' Flashy!

One of many great things about Flashy that Larry alludes to above is that the player itself isn't tied to Drupal; you use it with any GPL-compatible framework or CMS, or even just as a standalone SWF player for a static site. We're hoping that everyone finds this to be a useful tool, not just those in the Drupal community.

Why not on d.o?

Given that the module is useless without the other script, and the fact that the Flashy file is GPL, why not either:

  • Include it in the module itself and just use the latest version available,
  • Build it in such a way that the Flashy file can be loaded directly from google at run-time,
  • Support both of the above and allow the site admin to control which is used?

It just doesn't seem to make sense to me to not do the above.

Drupal.org policy

We deliberately wanted the player itself to be Drupal agnostic, which is why we're hosting it off-site. Drupal.org CVS policy forbids including 3rd party code (which Flashy then technically is) that is easily available elsewhere. That means we couldn't host it in CVS if it is readily available on Google Code. We decided that, plus an easy Drush command, was the best trade-off.

There's currently no "just use the copy on Google" functionality because the module was written before we got the code up on Google in the first place. However, I'm certainly open to a patch that would allow that option. My only concern is that I'm not sure if Flash's security model would allow the wrapper to come from code.google.com and then show videos from yoursite.com. I haven't tried it.

In other words, "patches welcome!" :-)

Integration with XSPF Playlist module?

This is an exciting development for me, as I am right in the middle of adding video functionality to an existing site, using a solution based on Media Mover. Media mover integrates with XSPF Playlist module to cleanly feed embedded players a playlist of media attached to a node. What would it take to get Flashy working with XSPF playlist?

Already does, sort of

Flashy already supports a subset of XSPF. One of the API calls to it lets you specify an XML playlist file by URL that will be used. Although Flashy only groks a subset of XSPF it was written to make it possible to extend later, and to not choke if a playlist includes features it doesn't leverage. Check the API.txt file on the Google Code site. We did that deliberately to make it possible to integrate with other established tools.

Since it's a URL, I can't see a reason why you couldn't feed it a URL that generates a playlist file dynamically, or uses the same trick as imagecache to lazy-create one, or whatever else.

So hooking Flashy up to the XSPF module or Media Mover shouldn't be that hard. If you get any reusable code out of it, patches welcome. :-) (Or sub-modules, or whatever it ends up being.)

Nice work!

Great to see a free, reliable flash player to use :)

One thing I noticed, when I first come to this page, the video plays with black bars on each side. After it's done, and it play it again, now the video fills the entire 480px width.

first play
http://img.skitch.com/20091010-tiuuw45ubshpbg7sxus71ybw7.jpg

second play
http://img.skitch.com/20091010-x1754wumywdiqdr3kiuhh5amau.jpg

Curious

Yeah, I spotted that too. It doesn't seem to happen on other sites, but it is happening here. I suspect it has something to do with the video encoding of the FLV file we're using, but I'm not sure. Virtually all of the actual decoding logic is handled by Flash internally, so that's a black box to me.

If you can figure out why and know how to fix it, we'll take patches on the Flashy player itself, too. :-) File those through Google Code.

Would this module play well

Would this module play well with the media mover module???

http://drupal.org/project/media_mover

That seems like a really useful module for letting users upload videos and then converting and storing them elsewhere, and this player seems fantastic!

If they could work hand in hand, my video drupal problems would finally be solved (i think).

It should?

According to the MM project page, it can stick the resulting image in a filefield field. Flashy can pick it up from there, so that should work fine. If you want to move the resulting file off-site (Amazon S3, etc.) you can reference it from a CCK Link field and that should work, too, with the caveat that it can't auto-detect the resolution. If you can set that globally, though, (there's a pair of variables for it), you should be fine.

One of the reasons we kept Flashy's footprint small was to make this sort of integration possible. Just get a file into a filefield somehow, and Flashy should pick that up.

Skinnable

Is (will) Flashy (be) 'skinnable', eg: is it possible to apply a different design on top of the player (like http://www.longtailvideo.com/addons/skins does)?

Kinda

You can reskin Flashy's color scheme and move the controls around using FlashVars. The details are in the API docs on the Google Code site.

Right now I don't think you can change the control icons themselves without recompiling. (Although the controls are nicely factored out with the goal of making them swappable eventually.) That would totally be a cool feature to add, though, if you know ActionScript. :-)