bizeps.or.at goose hacks

The German version of Yahoo Media Player aka goose is live in a news story titled Molterer: ORF ist keine private Einrichtung, er kassiert Gebühren.

There’s a striking degree of customization, which was done by a guy named Eric Eggert.

You can read their Javascript at http://www.bizeps.or.at/ymp-german.js. This is all concerned with translating the player into their users’ language, which of course is a necessity for a big league commercial site like this.

You can read their CSS at http://www.bizeps.or.at/artikelnew.css. Search for #ymp to find the customizations.

The most interesting CSS issue is that they override the sprite master for the graphics, but *only* for the buttons. The master sprite includes a bunch of other graphics that they apparently didn’t want to disturb.

Here’s the standard master sprite:

Here’s their button-only sprite:

Here’s* the part of their CSS which inserts the button sprite:

(*At least, I think so. This is from quickly eyeballing the CSS.)

<br /> a.ymp-btn-prev, a.ymp-btn-next, a.ymp-btn-play, a.ymp-btn-pause,<br /> a.ymp-btn-prev:focus, a.ymp-btn-prev:hover, a.ymp-btn-prev:active,<br /> a.ymp-btn-next:focus, a.ymp-btn-next:hover, a.ymp-btn-next:active,<br /> a.ymp-btn-play:focus, a.ymp-btn-play:hover, a.ymp-btn-play:active,<br /> a.ymp-btn-pause:focus, a.ymp-btn-pause:hover, a.ymp-btn-pause:active {<br /> background: url(/hpbilder/buttons.PNG) no-repeat !important;<br /> }</p> <p>a.ymp-btn-prev, a.ymp-btn-next {<br /> left: 0px !important;<br /> top: 5px !important;<br /> width: 30px !important;<br /> height: 30px !important;<br /> }</p> <p>a.ymp-btn-prev {<br /> background-position: 0 -262px !important;<br /> }</p> <p>a.ymp-btn-next {<br /> left: 67px !important;<br /> background-position: 0 -179px !important;<br /> }</p> <p>a.ymp-btn-prev:focus, a.ymp-btn-prev:hover, a.ymp-btn-prev:active {<br /> background-position: 0 -96px !important;<br /> }</p> <p>a.ymp-btn-next:focus, a.ymp-btn-next:hover, a.ymp-btn-next:active {<br /> background-position: 0 -302px !important;<br /> }</p> <p>a.ymp-btn-play {<br /> background-position: 0 -219px !important;<br /> width: 33px !important;<br /> }</p> <p>a.ymp-btn-play:focus, a.ymp-btn-play:hover, a.ymp-btn-play:active {<br /> background-position: 0 -53px !important;<br /> }</p> <p>a.ymp-btn-pause {<br /> background-position: 0 -10px !important;<br /> }</p> <p>a.ymp-btn-pause:focus, a.ymp-btn-pause:hover, a.ymp-btn-pause:active {<br /> background-position: 0 -136px !important;<br /> }</p> <p>#ymp-volume {<br /> left: 115px !important;<br /> }</p> <p>#ymp-meta,<br /> #ymp-tray {<br /> left: 140px !important;<br /> }</p> <p>#ymp-meta-image {<br /> background: none !important;<br /> }</p> <p>

They also changed the default album art, which they did by putting an img element in each of their audio links. For example:

<a href="/multimedia/molterer081121orf.mp3">
<img border="0" align="right" alt="Bild von Kopfhörer" src="http://www.bizeps.or.at/hpbilder/audio.GIF"/>
Zitat anhören (1.744 KB / mp3)
</a>

The broad lesson is about how making widgets with Javascript rather than Flash is good for your project.

Big league commercial shops like this web site must be able to customize their widgets. It’s not the same kind of personalization that drives Myspace users to change their background image, but it’s make-or-break. And big league sites like this are the ones who get your widget into big numbers.

These guys were able to do this degree of customization specifically because the player is made of open standards. By definition, open standards are APIs and hooks for user code.

So using open standards for your widget or tool is to your own advantage. Don’t invent an API, adopt internet standards and let them be your API.