Podcast Producer 2 and the iPad

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.

iHave iPad…and iLove it

Yesterday morning, at around 11:15 a.m., the doorbell rang. It was a friendly UPS delivery man, handing me a package from Apple. Inside, was my new iPad.

I was in the middle of a Skype conversation with some friends from Germany, so I took the opportunity to give them an exclusive look at me unboxing my new pride and joy. They were quite impressed, especially with how thin and sleek it looked. I promised to give them a better look when I’m in Germany this summer to attend a friend’s wedding.

I’ve had just over a day now with the iPad. I’ve already downloaded a couple of dozen apps, including a bunch of free ones and a few that I purchased. One of the apps that I’ve downloaded is the WordPress application, which is what I’m using now to create this post. (I’m also using a bluetooth keyboard, which I find a bit easier to use than the onscreen keyboard for longer typing sessions.)

So far, I must say that I’m very happy with my purchase. The iPad is really a remarkable device. I had written earlier about how much I wanted one, and why. But now that I actually have one, I can honestly say it’s even better than I had imagined. Really. It’s that good.

What makes it so good? Let me mention my top three reasons why the iPad is my new favorite device. First, the iPad is super fast. Tap an icon, and BAM, you’re online. Tap another, and you’re looking at your email in one of the best email interfaces I’ve ever used. Tap another, and you’re reading a book, or watching a video, or listening to a tune, or playing a game. This thing is already making my laptop seem slow (and it’s a pretty fast laptop).

Second, the iPad is gorgeous. It’s aesthetically very pleasing. Elegant lines, with tastefully understated controls. Beautifully intuitive interface. Brilliant bright screen that’s easy on the eyes. It’s the kind of cool look you just want to show off to others. And yet for all its good looks, the iPad doesn’t get in the way of the content it displays, whether it’s a web page, a movie or an email. It just makes all of that content look great.

And third, the iPad is versatile. It does so many different things right out of the box. But when you start adding apps, and experiencing what developers have been able to do with the iPhone operating system on a bigger screen, you begin to realize this is so much more than a big iPod Touch. I like the iPod Touch, and I’ve owned a couple of them. But the iPad is so much more. And with more apps being added every day, this thing really does fill the niche between a laptop and an iPhone. And it does so very well.

Some people have compared the iPad to netbooks and Amazon’s Kindle, but really, there is NO comparison. I’ve used netbooks, and they are mostly underpowered mini-laptops. I’ve used the Kindle, and while it’s a fine ebook reader, it’s a one-trick pony. And with the iBooks app, that pony is looking like an old mare.

It won’t take long for the iPad imitators to appear. After all, imitation is the sincerest form of flattery, and there is plenty to flatter about the iPad. There already is something called a “JooJoo”, which is probably the closest to an imitation iPad out there right now. We’ll probably see Google push out the Chrome OS to a slate. I could see Motorola releasing a king-sized Droid. And of course, Microsoft will undoubtedly copy Apple; they always have. But by then, we’ll be talking about iPad 2.0.

Once again, Apple has a hit on its hands. Once again, Apple has led the way toward a new paradigm in computing. And once again, I’m very glad I bought an Apple product.