Shortly after I got my iPad, I discovered something interesting. Whenever I visited one of the many web pages on my Snow Leopard Server with embedded videos created by Podcast Producer 2, the videos wouldn’t play. When I clicked the thumbnail, the image would just turn to a black square.
Some of you who read my blog know that I’ve written many posts about Podcast Producer 2, a key component of Snow Leopard Server. I’ve described various techniques for getting Podcast Producer 2 (PP2) to “play nice” with Windows Internet Explorer, and how I substituted the Quicktime plugin for the open source Flash player Flowplayer. Of course, Flash doesn’t work on the iPhone, but that wasn’t a major issue since Snow Leopard Server dishes up a different version of a PP2 page for iPhones. I had hacked together a solution that would serve PP2 videos inside Flowplayer when viewed on a computer browser, but serve PP2 videos inside the native H.264 player on the iPhone.
But my little cludge didn’t work on Mobile Safari on the iPad. That’s because Snow Leopard Server doesn’t serve up a different page for iPads like it does for iPhones. Perhaps this is deliberate, since the bigger screen real estate on the iPad doesn’t necessitate the compact presentation of an iPhone-optimized page. Or perhaps Apple didn’t include in the latest update to Snow Leopard Server specific user agent detection code to serve iPad-optimized pages.
Whatever the case may be, I reported this situation as a bug to Apple a few days ago. I had hoped that the most recent Snow Leopard Server update would include code that would produce PP2 pages that could be viewed on the iPad, but no such luck. Hopefully, this will come in an update down the road. But until then, I’ve developed a workaround.
Here’s how I got PP2 to play nice with the iPad…
First, I downloaded the open source javascript library Modernizr from http://www.modernizr.com. This little gem allows one to detect whether a client’s web browser can handle HTML 5. Mobile Safari on the iPad can display HTML 5 video, and in fact, Apple explicitly recommends using the HTML 5 VIDEO tag to display video on an iPad optimized page in this technote.
I put the Modernizr javascript file in my web directory (I just put it at the root level). Then I added a line in the custom wiki theme that I use for PP2 pages. The line I added is just a simple SCRIPT tag that references the Modernizr javascript file. Essentially, every page the PP2/Wiki Server produces that uses this custom wiki theme will include a call to the Modernizr javascript library. This wasn’t hard to do; in fact, the process was very similar to what I did to add a call to the Flowplayer javascript library that I described in great detail in a previous post.
Next, I added the following bit of code in the expandMedia function found in wiki.js (and compressed_wiki.js)…
else if (Modernizr.video) {
var objectHTML = '<video autoplay width="'+img.width+'" height="'+(img.height+(extendHeight?16:0))+'" src="'+fullSrc+'?sessionID='+server().sessionID+'" controls></video>';
embed.innerHTML = objectHTML;
Element.hide(img);
}
Essentially what this code does is call on Modernizr to test whether a browser supports HTML 5, and if so, uses HTML 5 to display the PP2 video instead of presenting it with the Quicktime plugin. I use the autoplay attribute to cause the video to click when a user clicks on the thumbnail. And the controls attribute causes the video to be displayed with whatever playback control bar is provided by the browser.
Again, I describe in great detail in this previous post the process for editing the wiki.js and compressed_wiki.js files, since I used a similar technique for swapping out the Quicktime plugin for Flowplayer. I would certainly recommend making backups of the original wiki.js and compressed_wiki.js files, as well as any modifications, since these files will likely be overwritten by future Snow Leopard Server updates.
With these changes, the Podcast Producer 2 videos on my website can now be played on an iPad. Indeed, as an added bonus, these videos are now displayed using HTML 5 on any web browser that supports HTML 5, like Safari and Chrome. The Modernizr script detects whether the page is being viewed in an HTML 5 capable browser, and if so, my code swaps in the appropriate HTML 5 code.
My iPad is happy now. Here’s hoping that the folks at Apple who maintain the Snow Leopard Server code will produce an update that will work with an iPad someday. Until then, my little hack seems to do the trick.