Tag: Video

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.

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).

West Chester University on YouTube

I’m hoping that someday West Chester University gets its own official channel on YouTube. But a search on YouTube finds plenty of videos about our fine university. Some of the videos are pretty good, some aren’t that great, and a few are, well, forgettable.

I found this CollegeClickTV playlist on YouTube, and thought I would share. It’s a playlist of student comments about their experiences at WCU. Some of the videos are a bit dry, but a few of them shed some interesting insights into our campus. Anyway, it’s nice to hear students talk candidly about their experiences at WCU, and to see WCU getting some fairly nice exposure on YouTube.

By the way, you can advance to the next video in the playlist by clicking the arrows on the right side of the video player. There are a total of 8 videos in this playlist, but additional CollegeClickTV videos about West Chester University, as well as higher resolution downloadable videos, can be found on the WCU Channel on CollegeClickTV.com.

Why doesn’t WCU have its own YouTube channel? I’m not sure. For that matter, I’m not sure why we don’t have an iTunes U channel, either. I’d love to see it happen. But for now, I’ll just note that there are some very nicely done University channels on YouTube. Here are a few of my favorites…

Dr. Horrible is terrific

If you haven’t already seen it, you should take a few moments to watch Dr. Horrible’s Sing-Along Blog.  The film is initially being distributed on the internet, and can be viewed as streaming video for free through July 20.  It’s also available for download from the iTunes store, and will eventually be available on DVD.  Dr. Horrible has become a tremendous success in a very short period of time, illustrating a uniquely potent distribution model that is causing many to rethink traditional Hollywood practices.  It’s this summer’s “Blair Witch Project,” but way cooler, and a lot catchier.

Dr. Horrible is masterfully played by Neal Patrick Harris (who rose to fame for his portrayal of “Doogie Howser, M.D.,” and more recently, as the character Barney in “How I Met Your Mother”).  I won’t give away the plot, but I will say that it grows on you.  I almost tuned out after the first minute of Part 1, which starts with a leisurely pace that seems painfully slow at times.  But the tentative tempo is a clever way of setting the scene for the bittersweet love story that is both disarmingly cute and decidedly strange.  And to top it off, it’s a musical, a genre that apparently still has a lot of life left in it.

Now broadcasting on Mogulus.com

I’m trying out the beta of Mogulus Studio on mogulus.com.  It’s a pretty slick web 2.0 application for creating personal video channels.  I posted some short videos from a train trip I took this past weekend. Check out the channel I created on http://www.mogulus.com/drthompsen.  They even let you post a “widget” of your channel on your blog…




I’ll have to kick the tires around a bit more, but so far, Mogulus Studio looks like a great app.  And it’s free (if you agree to have their ad banners on your channel). There is one caveat: since it’s flash based, don’t expect to use it on your iPhone.  At least not yet.