RollingTurtle » All About UMCoDeveloped by RollingTurtle with much appreciated financial support and technical guidance from the fine folks at skyBuilders.com.
See UMCo in action at bopnews.com (click the "BOP Radio" image in the left column) and blogaudio.org (click the "A Media Controller" link in the left navigation pane)!
UMCo is a skinnable browser plug-in controller that allows web designers (and hobbyists!) to present users with a consistent interface for the control of media content, regardless of which plug-in a particular browser uses to play the content. The best way to get a sense of what UMCo is is to see it in action. (If it doesn't look all that fancy to you, you're probably using an unsupported browser.)
UMCo really shines in situations where multiple plug-ins are able to play the media type you are posting. The most typical example is an MP3 file, which can be played by the Quicktime, Windows Media Player, or RealPlayer plug-ins (to name the major contenders). Any one of these plug-ins may be the default MP3 player on a given browser, depending on the order in which the plug-ins were installed.
As a designer presenting an MP3 file, you don't want to proscribe which plug-in visitors to your site must use, since they will all play MP3 files equally well. But you would like to provide them with an attractive, responsive interface that is consistent with the design of the rest of your site. For instance, why must you be stuck with RealPlayer's lime green control panel if there's no lime green in the rest of your site? You'd also like to suppress any ads or extraneous content that the media plug-in might display if it opens in the usual way.
The good news is, the three major media players now all support javascript control of their internal functions. This clears the way for a truly universal XHTML/CSS based media controller that takes advantage of the "under the hood" capabilities of media plug-ins, while leaving the details of the interface where they should be -- with the designer!
For the time being, UMCo functions optimally only in an MS Windows environment with IE6 or Mozilla (and related browsers like Netscape 6 & 7). This does not in any way reflect a preference on the part of the developer for MS environments. Rather, it is a reflection of the reality (as I understand it) that javascript control of media plug-ins is only available on Windows platforms at this time.
It appears that there was a brief window of time when it was possible to script plug-ins in Mozilla for the Mac, but that functionality is broken in versions after 1.2. Rather than encourage people to use old browsers, I have decided to forego Mac support at this time. However, it is my belief that as time progresses and the OS X browsers and plug-ins mature, plug-in scripting on the Mac will again be possible, and I intend to fully support it at that time.
The plug-ins currently supported are Quicktime, Windows Media Player, and RealPlayer.
It's easy for anyone with just a basic knowledge of HTML! There's nothing to install, and no need to copy anything to your web server. UMCo can be activated from your web page with a (relatively) simple line of javascript.
The very easiest way to set up an UMCo link is to use the automatic UMCo link generator below. If you'd like to get a better understanding of how to write your own link, though, here's how:
First, create an HTML tag on your page that you'd like to act as a link to your media file. It can be an image, an HTML button, or even a regular hyperlink. Then, set that element's "onclick" property as follows:
onclick="window.open('http://www.rollingturtle.com/design/umco/umco.php?file=http://www.mysite.com/mymusic/mysong.mp3&title=My%20Song', 'umco', 'resizable, status', true); return false;"
So, for example, a complete hyperlink would look like this:
<a href="#" onclick="window.open('http://www.rollingturtle.com/design/umco/umco.php?file=http://www.mysite.com/mymusic/mysong.mp3&title=My%20Song', 'umco', 'resizable, status', true); return false;">Hear my song!</a>
If you're not used to working with javascript this can look a little daunting, but there are really only two pieces you'll have to change after you cut and paste. One is where it says file=. Subsitute the actual URI (address) of your file for the sample one given. Make sure you give the full address, including the http:// at the beginning. Then just substitute the title of your song where it says title=. You can also put any other information you want in the "title," such as the performer or composer of the song. For instance, it's perfectly fine to put title=Super%20Cool%20Song,%20by%20coolDude. Note that since the title is being passed in a URI, it's a good idea to substitute %20 for any spaces in your title. The automatic link generator will do this for you.
Not yet, because UMCo is new and so far only a few people are using it. If you are the webmaster of a large site that gets many hits and you'd like to use UMCo, please do the right thing and copy the controller to your server (it's open source) so you don't fry mine. However, if you're a small personal site, I'm happy to provide UMCo for free, because it's good advertising for RollingTurtle.
If, in the future, the load on the server becomes too high, I reserve the right to remove the free, linkable version. There will be advance notice of this in the form of an announcement in UMCo's status line, so you'll have time to migrate to another solution. Of course, the code will always be open source, so if the free version is taken down, you can always simply install UMCo on your server.
Absolutely! That's one of it's biggest strengths. All you need is a basic knowledge of CSS.
To apply your own CSS file to the controller, use the automatic UMCo link generator, or add this parameter by hand to your window.open() call.
&skin=http://www.mysite.com/skins/myUMCoSkin.css
The easiest way to create a skin is to base it on an existing one, like the default skin or the Rolling Turtle skin. Both of these skins include comments that will help you decide what rules to edit for your skin.
Be sure to test your skins before letting them loose in the world. I've done my best to ensure that vital parts of the layout can't be broken by a bad style sheet (for instance, for the most part font changes in your skin will be ignored because changing the fonts can break the layout, particularly the title bar). However, there's no way to block problems like that completely, so confirm for yourself that everything looks ok before using your skin "in the wild."
Here are URIs for all the publicly available skins I'm aware of:
| Name | Author | URI |
|---|---|---|
| Default | Mac | http://www.rollingturtle.com/design/umco/skins/defaultskin.css |
| Rolling Turtle | Mac | http://www.rollingturtle.com/design/umco/skins/rtskin.css |
If you come up with a skin you'd like to make publicly available, let me know (mcohen[AT-SIGN]rollingturtle.com) and I'll add it to the list for everyone to enjoy.
Yes, you can do that too, but the method is slightly different than regular skinning. You need to create a folder on your web server to hold your custom graphics. The folder should contain the following 7 files: pause.gif, play.gif, scanback.gif, scanbackend.gif, scanfwd.gif, scanfwdend.gif and stop.gif. You must use these exact filenames. Then, use the automatic UMCo link generator or add an imgpath parameter to your window.open() call, like this:
&imgpath=http://www.mysite.com/myUMCoImages/
UMCo will then use your graphics instead of the default ones. They will automatically be centered inside the buttons, so you don't need to leave any blank space around the edges.
You're welcome to use the standard button graphics as a starting point for your own. Just right click on them to save them.
 |
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| pause.gif | play.gif | scanback.gif | scanbackend.gif | scanfwd.gif | scanfwdend.gif | stop.gif |
As with skins, if you come up with a button image set that you'd like to share, e-mail me and I'll be happy to post it here.
Want to use UMCo on your site but don't want to bother with hand-coding your own link? No problem! Let this handy generator create your button, hyperlink, or image link for you. If you do not wish to use any fields, simply leave them blank. Only the media file field is required.
This page last modified 12/16/2003.
This site is copyright © 2003 by Michael A. Cohen except where otherwise noted. All rights reserved.