Flowplayer and Podcast Producer 2: The Code

I’ve received quite a few comments about my previous post “Adding Flowplayer to Podcast Producer 2.” I’m pleasantly surprised by this feedback regarding my workaround to what is, in my opinion, a significant deficiency in Snow Leopard Server. I’ve responded to a couple of these commenters by direct e-mail, but perhaps it would be more efficient if I just shared the relevant code and provided some step-by-step directions.

Let me begin by speaking to this “significant deficiency in Snow Leopard Server.” As I said in my previous post: while there “might be valid reasons for Apple sticking with the Quicktime plugin rather than using a more modern-looking javascript player…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.” I am still hopeful that Apple will come to the realization that they should share with their Server customers the javascript player code they use on their own site to present videos. It would be in their best interests to do so, especially given the recent comments by Steve Jobs that Adobe Flash is a “CPU Hog” and the source of 90% of Safari crashes. Committing Apple to standards-compliant HTML 5 is noble, and I agree that Flash deserves to be criticized. Flash does hog CPU cycles, and I’m a believer in the future of HTML 5.

But as a practical matter, Apple’s SL Server customers need to be able to deploy videos on the web NOW, and to be able to have those videos viewed by ordinary people using ordinary web browsers on ordinary computers…including the vast numbers of ordinary Windows computers out there. And the Quicktime plugin doesn’t cut it as a Flash player replacement. Isn’t that why Apple’s own web site uses javascript extensively to present videos without using Flash players? Apple doesn’t rely on the Quicktime plugin to present videos on its web site, so why do they sell a server product that uses the Quicktime plugin to present videos on the web? It isn’t for lack of javascript in SL Server: there’s oodles of it all over the pages produced by Wiki Server. And I suppose Apple could say you could roll your own javascript player to mimic what Apple does on their own web site, but why should we have to reinvent the wheel?

I suspect one reason why we don’t see the slick javascript used by Apple on its website integrated into Wiki Server is because Apple’s own web developers don’t talk much with the developers of Apple’s Server software. And that’s a shame. Steve Jobs, if you’re listening…could you get these two groups together for an afternoon of sharing? If you really want to wean the world off of Flash, why don’t you start by giving your server customers a real alternative to Flash—a full-featured javascript player—rather than relying on the Quicktime plugin in your server product?

Until Apple delivers a real alternative to a Flash player in their server product, here is my detailed description of the workaround I’ve developed. In essence, I have modified the javascript in Wiki Server so that videos are presented using Flowplayer (a very nice Flash player) rather than the Quicktime plugin. Here’s how I did it:

Step 1: Download Flowplayer from http://flowplayer.org/, and upload it to a directory on your web site. As I write this, a basic download of Flowplayer will include the files flowplayer-3.1.5.swf (the core flash player) and flowplayer.controls-3.1.5.swf (the core flash controller bar). It will also include (inside the example folder) the flowplayer-3.1.4.min.js file, which is some basic javascript you need to load into the pages where you want to use Flowplayer. (Technically, Flowplayer will work without this bit of javascript, but in most cases you will want to have this javascript loaded onto your pages so that you can use Flowplayer’s javascript API.) So in order to add this javascript reliably, I add a SCRIPT tag that references this file in a custom theme, which is the next step…

Step 2: Create a Wiki theme that includes a reference to the Flowplayer javascript. The easiest way to do this is to copy an existing theme and make changes to the copy. You’ll find these themes in /Library/Application Support/Apple/WikiServer/Themes/. I used the Snowleoplard theme as the basis for my custom theme. I opened a terminal window, changed to the theme directory, and used the ditto command as root to make an exact copy like this…


cd /Library/Application\ Support/Apple/WikiServer/Themes/
sudo ditto snowleopard.wikitheme/ customthemename.wikitheme/


Replace “customthemename” with a descriptive name of your choice (no spaces). In my case, I called my new theme “snowleopard-wcu.” If you have the “Wiki Server Administration” manual handy, you might want to refer to chapter 3 for more information about creating a custom theme. There you’ll see that an important step is to edit the theme.plist file so that your new custom theme can be selected in the wiki settings. At the very least, you’ll want to change the “display name” and “name” values to match your new theme. Here’s what my custom theme’s plist file looks like…


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>displayName</key>
<string>WCU Theme</string>
<key>name</key>
<string>com.apple.snowleopard-wcu</string>
<!--
<key>mobileHeaderColor</key>
<string>#3772bc</string>
-->
<key>commentSortDirection</key>
<string>DESC</string>
<key>version</key>
<string>2</string>
</dict>
</plist>


Now I need to add a line to the theme’s default.xsl file that inserts the Flowplayer javascript file. Below is the relevant portion of my default.xsl file (with the vertical ellipses indicating there is code above and below this snippet):

.
.
.
<xsl:template match="page">
<html lang="{context/locale}">
<head>
<script src="http://communication.wcupa.edu/flowplayer/flowplayer-3.1.4.min.js" language="JavaScript" type="text/javascript"></script>
<!-- meta tags -->
.
.
.


Of course, you’ll want the URL in the src attribute to point to where you’ve saved your flowplayer-3.1.4.min.js file (please don’t point to mine!). Now save the default.xsl file, and reboot the wiki server by issuing this command in a terminal window…

sudo serveradmin stop teams; sudo serveradmin start teams;


Alternatively, just issue the stop command, wait for confirmation, then issue the start command. Once the wiki (teams) service has restarted, go into a wiki that you want to change to the new theme. Login, click on settings, and click the “choose themes” button (on the Blog tab). If all went well, your new custom theme should be available in the list. Select it and click OK.

Now you have a theme that will include this all important little bit of Flowplayer javascript on every page. Wherever you want Flowplayer, use this theme. If it’s important that you have Flowplayer in all of your themes, I suppose you could make the changes I describe above to all of your themes. But keep in mind that Apple could overwrite the stock themes that come with SL Server in a software update. If you want to insure Flowplayer works even after a software update, I recommend that you use a custom theme.

Step 3: Edit the wiki.js and compressed_wiki.js files to use Flowplayer instead of the Quicktime plugin. These two files are essentially the same, although the compressed file isn’t formatted with a lot of spaces and indents. It’s a lot easier to edit the wiki.js file, and then just use your favorite text editor to do a search and replace to make the exact same changes in the compressed file.

First, make a backup of these files, just in case. Both of these files are located in usr->share->collaboration->javascript. Make a backup of the files using your favorite method (using ditto in the terminal or just copy using the finder). Put the backups in a safe place. I can’t stress this enough: save a backup of the original files in case you need to revert to them.

Next, open wiki.js in your favorite text editor (I use TextMate). We’re going to change the value of the variable objectHTML. Here is what this variable looks like before our edit…


var objectHTML = '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="'+img.width+'" height="'+(img.height+(extendHeight?16:0))+'" codebase="http://www.apple.com/qtactivex/qtplugin.cab"><param name="SRC" value="/collaboration/fake.qti"><param name="QTSRC" value="'+fullSrc+'?sessionID='+server().sessionID+'"><param name="TYPE" value="video/quicktime"><param name="SCALE" value="aspect"><param name="AUTOPLAY" value="true"><param name="CONTROLLER" value="true"><param name="TARGET" value="myself"><param name="BGCOLOR" value="'+backgroundColor+'"></object>';
// Firefox wants only an embed tag, and it has to be written using innerHTML. Also, have to hide image *first*
if (MozillaFixes.isGecko) {
Element.hide(img);
embed.innerHTML = '<embed src="/collaboration/fake.qti" qtsrc="'+fullSrc+'?sessionID='+encodeURIComponent(server().sessionID)+'" type="video/quicktime" autoplay="true", controller="true" target="myself" bgcolor="'+backgroundColor+'" width="'+img.width+'" height="'+(img.height+(extendHeight?16:0))+'" pluginspage="http://www.apple.com/quicktime/download/" scale="aspect" />';
}


…and here is what this variable looks like after my edit…

var objectHTML = '<object width="'+img.width+'" height="'+(img.height+(extendHeight?16:0))+'" data="http://communication.wcupa.edu/flowplayer/flowplayer.commercial-3.1.4.swf" type="application/x-shockwave-flash"><param name="movie" value="http://communication.wcupa.edu/flowplayer/flowplayer.commercial-3.1.4.swf" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="flashvars" value=\'config={"plugins":{"controls":{"height":"16","backgroundColor":"#330033","timeColor":"#eeee99", "progressColor":"#cccc99","bufferColor":"#774477","sliderColor":"#777777","timeBgColor":"#222222"}},
"key":"#####","clip":{"url":"'+fullSrc+'?sessionID='+server().sessionID+'"}, "canvas":{"backgroundColor":"#550055"}}\' /></object>';
// Firefox wants only an embed tag, and it has to be written using innerHTML. Also, have to hide image *first*

if (MozillaFixes.isGecko) {
Element.hide(img);
embed.innerHTML = '<embed src="http://communication.wcupa.edu/flowplayer/flowplayer.commercial-3.1.4.swf" allowFullScreen="true" bgcolor="#333333" width="'+img.width+'" height="'+(img.height+(extendHeight?16:0))+'" align="middle" type="application/x-shockwave-flash" pluginspage=http://www.macromedia.com/go/getflashplayer" flashvars=\'config={"plugins":{"controls":{"height":"16","backgroundColor":"#330033","timeColor":"#eeee99", "progressColor":"#cccc99","bufferColor":"#774477","sliderColor":"#777777","timeBgColor":"#222222"}},
"key":"#####","clip":{"url":"'+fullSrc+'?sessionID='+server().sessionID+'"}, "canvas":{"backgroundColor":"#550055"}}\' />';
}


Note that you’ll want to change the src values to point to the URL of the location of the Flowplayer swf file that you’re using on your site. I’m using the commercial version on my site, although I’ve changed the key value in this post to just #####. I don’t think the Flowplayer folks would like me sharing my key value, and besides, I don’t think it would work outside of my domain anyway. If you’re not using the commercial version of Flowplayer, take out this key value. I’m not sure if all of the “flashvar” options I’ve set here will work in the same way with the noncommercial version, but I think most will, as I don’t think I’m doing anything too exotic. You might want to change the color values of the player to match the look of your site, and fiddle with the flashvars to taste.

Once you’ve changed the value of the objectHTML variable in wiki.js (and in compressed_wiki.js), I would suggest backing up these modified files, and saving them in a safe place. That way, if a software update ever overwrites these javascript files, you can easily copy back your modified files. Of course, I’m hoping that one of these days, a software update to SL Server will modify this variable so that it doesn’t use the Quicktime plugin, but until that day comes, you can use the method I’ve described here to use Flowplayer instead.

You may need to restart your server after making these changes. And you may need to study my code and the example code on Flowplayer.org to get Flowplayer looking just right on your site. But with patience and determination, you should be able to get Flowplayer running on your site without too much trouble.

I hope this helps those of you who commented on my previous posts, and anyone else in a similar situation who stumbles across this post. And if you discover any additional tweaks or insights into this process, please consider sharing in a comment.