Adding Flowplayer to Podcast Producer 2

Today I had another breakthrough in my implementation of Podcast Producer 2, a core part of Snow Leopard Server. As noted in my previous posts, PP2 is “still a work in progress,” but it is also a vast improvement in many ways over my previous video transcoding system based on ffmpeg and Drupal. I’ve been consistently impressed with the quality of the videos produced by PP2, although the file sizes are a bit larger than what I squeezed out of ffmpeg. But one thing that hasn’t impressed me is the “plain vanilla” look and minimal functionality of videos presented using the Quicktime plugin.

I realize there might be valid reasons for Apple sticking with the Quicktime plugin rather than using a more modern-looking javascript player. But for the life of me, I can’t think of any reasons that would excuse Apple from not providing its Snow Leopard Server customers with the option to make videos look as good as on Apple’s site. Almost everywhere you look on Apple’s website, you see snazzy-looking Quicktime presented in cross-platform stable players, typically built in javascript. Even the new Quicktime player that is included with Snow Leopard client gives you a javascript option when exporting a video for the web. So why didn’t Apple provide a javascript player option with Podcast Producer 2? At the very least, Apple could have provided some configuration hooks to make it easier to do something other than present videos using the Quicktime plugin.

But where there’s a will…there’s got to be a way. And my “breakthrough” today was in finally finding that way. It isn’t using one of the various javascript players you can find on Apple’s site. Those aren’t at all well-documented, and trying to piece together something workable from the clues found in page sources is not my idea of a fun afternoon. No, the player I’m using to present the Quicktime videos produced by Podcast Producer 2 is Flowplayer, a really great little Flash-based player.

With my previous ffmpeg/Drupal system, I had been using a Flash-based player to present the videos: the venerable JW Player (now a product of Long Tail Video). But for a variety of reasons, I couldn’t get this player to work right with the m4v Quicktime files produced by the PP2 system. And the look of JW Player is getting a bit dated, although not nearly as dated as the look of the Quicktime plugin. Flowplayer, on the other hand, is modern-looking, clean and well-documented. The key to getting Flowplayer to work with PP2/Wiki server was finding just where to put the code…something that I mentioned at the end of my last post.

So today, after editing some code in the wiki.js and compressed_wiki.js files (both located in usr->share->collaboration->javascript), I now have Flowplayer injected instead of the Quicktime plugin whenever a user clicks on a thumbnail. The main edit was to the objectHTML variable (quoted in my previous post). In essence, instead of referencing the Quicktime plugin, I referenced the SWF player file included in Flowplayer, and passed to it the same parameters that had been going to the plugin. To keep things in line with the way the Quicktime plugin had been injected, I used the OBJECT method of inserting Flowplayer. To keep Firefox happy, I echoed this change using the EMBED method found in the embed.innerHTML variable in the code right below the objectHTML variable. I also tweaked the height adjustment, adding 24 pixels to video files and 8 pixels to audio files (using extendHeight?24:8) to accommodate the slightly higher control bar of Flowplayer. And to get the Flowplayer javascript file loaded, I added a call to this file in the head of the default.xsl file in the Wiki theme folder (and in the enclosed compressed folder). And that’s pretty much it.

Now videos on my site look so much better, with a decent looking control bar that I can customize to my heart’s content. Time indicators? Check. Slick color instead of boring monochrome? Check. Volume slider you actually notice? Check. Seek bar with time points? Check. Big bold play and replay buttons? Check. Options galore for tweaking things just right? Check.

It did take some effort to get my head around the code I needed to adjust in Apple’s javascript files. And yes, my changes will most likely be overwritten by a software update, so I’m being careful to backup my edits. But now that I understand where to make the changes, and how, I think I will continue to use Flowplayer instead of relying on the stock Quicktime plugin to present PP2-produced videos.

At least until Apple does the right thing and finally brings to their Server product a decent javascript player…like the ones that have been used for a long time on Apple’s own web sites.

7 thoughts on “Adding Flowplayer to Podcast Producer 2”

  1. That’s pretty cool Phil. And I’m happy to report that the mobile version of the site still retains the QuickTime player (instead of Flash — which I feared — as it would render your site incompatible with iPhone/iPod).

  2. Yes, I noticed that as well. I believe the web server tests whether a request comes from a mobile device, and if so, the wiki server sends a different version of the page, optimized for the small screen. I haven’t probed into the code that serves up the videos to mobile devices, but my guess is that it could be found in usr->share->collaboration->javascript->mobile.

  3. I’ve been searching for this type of solution. I’d be very interested to hear how you accomplished this. Would you be willing to share?

  4. Thank you so much for posting this. I’m in the process of bringing up a Podcast Producer 2 server and flash support is one of the requirements of the project. I’ll be following your notes very closely this week. Thanks for sharing!

  5. Thanks for your help! I’ve already implemented the height fix, but was wondering if you could possibly share your code changes for the flowplayer setup. I’ve been banging my head against the various non-compatibility issues for the last couple months getting this set up and running (including Open Directory and Active Directory together) and am to the point where pretty much everything is happy. This is one of the last steps for me. Thanks!

  6. Dr. Thompsen, if you could shoot me an email with guidlines on how to implement flowplayer within PP2 that’d be great. I’ve been trying to get this to work correctly for the last few days and it’s driving me nuts. I need PP2 to be able to work through Microsoft IE for sure prior to showing my managers this for real.

    Thanks!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.