I majored in video. No, really. So I’m picky about video quality online. YouTube is all well and good, but it’s still like four inches across, and so compressed it’s like watching the neighbor’s tv through their living room blinds, and you have raw eggwhite dripping in your eyes. I wanted a less egalitarian solution for my high-res output.

I wanted to post videos here on zoomy.net that were hosted on someone else’s hard drives, that didn’t come encrusted with extra interface, that didn’t require installing fancy plugins or obnoxious P2P servers, and that were the highest possible quality to minimize compromizationalizement of my pure artistic visionalism. As of this post, you can’t get there from here all at once, but with Stage6, Vimeo, and a bit of JavaScript switchery I have a workable solution.

Come To Viddy

There are a number of video sharing service comparisons online, such as this one at Life Goggles. Among the services compared, Stage6, a DivX marketing project launched last fall, stood out for its user-controlled image quality and its ability to host high-resolution files. However, DivX is still a relatively specialized codec mostly ignored by the vast majority of everyone, who have no need for life-size episodes of Bing-Bing Sailor Nookie Squeaky Princess, snagged from Japanese TV earlier this afternoon. Clearly, Stage6 is an attempt by the clever DivX people to remedy that, by increasing the amount of must-see-TV that requires their plugin. You have to convert your video to DivX to upload it, but as a codec control freak, I’d prefer to do that myself anyway. They do offer free converter apps for both Windows and Macs.

So I found a plugin-detection script which will serve the DivX version if you have the plugin, and otherwise show something Flash-based and friendly with a discreet suggestion to upgrade. More on the plugin in a bit.

For the friendly Flash version I went with Vimeo, because it’s easy to use and its default embed doesn’t have a big fat frame with its logo drooled all over it. Also, the video quality is relatively high, it has stereo sound, and the interface works as one expects it will. They’re still working out some of the kinks, but they have a tech guy roaming the forums who stripped my problem’s flesh in seconds.

Plug-In to Freshness

Here’s how we do:
I dropped some Austrian JavaScript on my server, and referenced it straight in my WordPress post, like so:

<script src="http://zoomy.net/plugin.js" type="text/javascript"></script>

Immediately below it, I called functions from the the plugin.js file to detect the plugins in question and serve the appropriate file. This particular JavaScript uses “extend” functionality which I believe means you can include any arguments or parameters you like, and it will pass those along to the embed. Here’s the code for my Space Bunnies clip:

<script type="text/javascript">
<!--
if (Plugin.isInstalled("DivX")) {
Plugin.embed("DivX", {width: 624, height: 352, src: "http://video.stage6.com/1188964/.divx", autoplay: "true", controller: "false", allowContextMenu: "true", mode: "zero", type: "video/divx"});
}
else if (Plugin.isInstalled("Flash")) {
Plugin.embed("Flash", {scale: "exactfit", quality: "best", width: 400, height: 224, src: "http://www.vimeo.com/moogaloop.swf?clip_id=172566", autoplay: "true"});
}
-->
</script>


The Art of the Upsell

As a final touch, I wanted to add a bit of text suggesting a DivX upgrade that would appear with the Flash file. So I added a variable to the plugin.js file (you could put it in any .js file, so long as you likewise reference it) that looks like so:

var divxNotice = "<p style='font-size:.8em'>For higher resolution, download the <a href='http://www.divx.com/divx/'>DivX plugin</a></p>";

Then I snuck a call to that variable in the “if Flash” section of the plugin detection script, just before that last close-curly-brace:

document.write(divxNotice);

I tried to put the notice straight into the post’s code, but I couldn’t get WordPress to allow the JavaScript to document.write a <br> it would parse as anything but plain text. There’s probably a reason for that — and it’s probably only expressible using formal logic. You’ll also notice there’s no “else” for everyone without Flash, because I hate them.

So: here’s a link to the post’s code all in one place for ultimate pellucidity. It’s all quite customizable, and will work for any of the numerous plugins the JavaScript can detect — check their docs. I haven’t tested exhaustively but it works on all the machines in the house; all I know about accessibility I read in the papers; and I welcome improvements, so long as you don’t hurt my feelings.

And if anyone has the latest Bing-Bing Sailor Nookie Squeaky Princess please contact me.

« previously: Beware of Space Bunnies | Home | next: Snow-Bo »

This entry was posted on Wednesday, April 18th, 2007 at 2:36 pm and is filed under Geekery, Web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.