Month: October 2009

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.

Getting Podcast Producer 2 to Play Nice With Windows

In my last post, I wrote about my experiences with Podcast Producer 2: the good, the bad and the downright ugly. Well, I had a bit of a breakthrough today in getting Podcast Producer 2 to “play nice with Windows,” so I’m posting my “new and improved” workaround.

As I described earlier, the main problem is the way PP2 posts videos to user blogs maintained by Wiki Server (which is a core part of Snow Leopard server). The primary culprits are the width and height tags that are included in the IMG tag that is written to the blog entry. If the video files were of a small resolution, PP2 would typically write out height tags that were empty, which breaks Internet Explorer on Windows, since IE assumes an empty height tag means a height of zero. But even if the video files were at a larger resolution, PP2 would write out width tags that were narrower than the actual width of the video file, presumably to make the thumbnail smaller than the video. That breaks any browser on Windows, since the Quicktime plugin for Windows doesn’t seem to be able to scale videos to fit within the dimensions defined by smaller-than-actual width and height tags. It works fine on a Mac, since it appears that the Quicktime plugin for Mac can shrink videos to fit into whatever dimensions are defined in a web browser.

My workaround was to manually edit these entries, removing the width and height tags. This would make the thumbnails full size, the same size as the associated video files denoted in the ALT attribute of the IMG file (a rather non-standard use of the ALT attribute, but that’s another issue). This workaround was a lot of work: manually editing the HTML of each and every video file produced by my server had become a daily chore. In the last month, I had edited over 1,000 blog entries. But at least the videos would play on Windows.

I had originally thought I should be able to fix this by changing the code found in the “_podcast.html” file found in the WikiTemplates folder in Library->Application Support->Apple->WikiServer. After all, this file looks like the exact template used by PP2 when it posts to WikiServer. But even though I removed the width and height attributes from this template file, it had no effect on the blog entries posted by PP2. I have since found that these templates are not used by PP2; they are used by WikiServer itself. That is, when you go to a user blog, click the plus sign to manually add a blog entry, and select the option to add podcast content, the resulting code is drawn from the _podcast.html file in the WikiTemplates folder. So PP2 must be getting the code from somewhere else.

Today I found out where: in a line of code in /usr/lib/podcastproducer/actions/wikiserver.rb. Near the top of this file is the following line…

MOVIE_ERB_TEMPLATE = "<%= h($properties[\"Description\"]) %> <br> <br> <img src=\"<%= poster_image_url %>\" alt=\"<%= published_url %>\" width=\"<%= width %>\" height=\"<%= height %>\" class=\"aligncenter posterimg\" />"

Bingo. I just took out the width and height tags from this line and restarted the server. Now PP2 doesn’t write out the width and height tags when it posts video podcasts. And I no longer have to manually edit the posts produced by PP2 to enable them to work on Windows. Hallelujah.

While studying this file, I think I discovered what may be the reason why PP2 is mucking up the dimension attributes. Further in this file are these lines of code…

if width > 480
height = PcastQT.info(input_published_path, "height").to_i * 480 / width
width = 480.0
end

So if I understand this correctly, what this does is check if a video is wider than 480, and if so, force it to stay at a width of 480 and adjust the height downward proportionally. That is, if a video has standard “VGA” dimension of 640 wide by 480 high, this bit of code forces it to be 480 wide by 360 high (the original height 480 multiplied by 0.75, or 480/640). And again, this scaling of the thumbnail downward is what seems to be breaking the Quicktime plugin on Windows.

I’m still not sure why videos that are smaller that 480 wide are being posted by PP2 with an empty height attribute, but I have a theory. I notice that in this section of code that the width is explicitly defined by this line of code:

width = PcastQT.info(input_published_path, "width").to_i

But height is not explicitly defined UNLESS the “if width > 480″ is evaluated true. This could be why I’ve discovered that for smaller submitted videos (say at a resolution of 320 by 240) the code being posted by PP2 has an empty height attribute (specifically, height=””). But whether or not this theory is correct, I’m happy that I’ve discovered a fix. By removing the width and height attributes completely from the MOVIE_ERB_TEMPLATE line of code, I’ve effectively addressed both the empty height attribute problem and the scaled-down width attribute problem.

Of course, Apple is likely to rewrite this file with a software update. Here’s hoping they correct this problem, so that I don’t have to hack the same file in the future. But just in case, I’ve documented my fix here for my reference, and potentially for the benefit of others frustrated trying to get Podcast Producer 2 to play nice with Windows.

UPDATE: I think I’ve discovered where the code lives that swaps out the video file for the thumbnail when you click on it. It appears to be in the javascript file wiki.js at /usr/share/collaboration/javascript/wiki.js. Near the bottom of this file is an “expandMedia” function that’s part of the QTMediaExpander class. The “objectHTML” variable appears to contain the code that embeds the Quicktime object…

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

I don’t think I should try to hack something here now, not with a PP2 server filled with 1200 videos and counting. But perhaps between semesters or over the summer break I’ll poke around here to see if I can’t get a prettier javascript Quicktime player instead of the plain vanilla Quicktime interface provided by the Quicktime plugin. Many people have requested a player that displays the elapsed time of the video, something I know is possible since Apple has such players on their own website (including here, for example).