Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript

Web Topics
All Articles
Scripting Languages

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab

Spicing-Up RealPlayer with JavaScript

by Steve McCannell

With the recent release of the tasteful Windows Media Player 7 tantalizing streaming media enthusiasts everywhere, and the stylish QuickTime 5 player just about ready to hit the streets, RealPlayer is looking a little bland these days. (In fact, have they ever changed the interface since the first version?)

This contrast in appearance became even more dramatic when I saw QuickTime 5's ability to associate custom skins with media files. I began to daydream about all the beautiful presentations we'll be seeing in the coming months, and I wondered if RealNetworks will be incorporating skins (or at least updating the look of the player) in future releases.

Instead of waiting for Real to do something, I decided to take matters into my own hands. We have the ability to control the RealPlayer environment through JavaScript, but it's rarely implemented. JavaScript is well known for its ability to manipulate objects within the browser, but the applications of the language vary so much that people may not think about controlling their media presentations with it. To show you how to do this, I built a demonstration that incorporates JavaScript and SMIL to create an interactive environment that houses a modern-looking RealPlayer presentation.

Dusting off the dinosaur

Demo Picture
View a demo of using JavaScript to control the presentation of RealMedia.

To revamp RealPlayer, I first needed to plan my attack. Mom always told me to stick to what I know best, so I chose to create a guitar chord showcase. I planned to include interactive buttons that would trigger both a picture of the fingering of the chord and a recording of what that chord sounds like. I needed to create the graphics that I would use as my skin for the presentation, and then the individual SMIL files for each button on my new player to handle the media events. Once those were finished, I would put them all together with a little HTML and use the following JavaScript function to allow for user control over the presentation.

<script language=JavaScript>
function PlayClip(clipname)
	if (navigator.appName == "Netscape") {

Nothing too complex here; the function basically tests for Netscape compatibility and sets the source of the player to the value passed into (clipname) from document.video. This script allowed me to associate any number of media files with a location in the document window. To trigger the media file, I put a simple OnClick command in the graphic's anchor tag to call out the media file, like this:

<a onClick="PlayClip('chordname.smi')"><img src="imagename.jpg"></a>

Grid of Circle Graphic
Figure 1. The finished graphic with cutting grid in place.

Putting the pieces together

The demonstration may look like one complete graphic, but in fact it is eight graphics laid out in an HTML table -- the most challenging part of this exercise. To do this, I first created the final graphic, then spliced it up into eight individual pieces (see Figure 1). To make the pieces fit together as one entity with the HTML table, I set the cellpadding and cellspacing to "0", and broke the table down into three rows. The first and third table rows held the top and bottom third of the circle, while the second held the left and right side of the graphic, and the embed tags for the RealPlayer window, like this:

<object id="video1" classid="clsid:CFCDAA03-8be4-11cf-b84b-0020afbbccfa"
align="center" border="0" width="189" height="148">
<param name="console" value="Clip1">
<param name="controls" value="imagewindow">
<param name="autostart" value="false">

Putting SMIL to work

If you are unfamiliar with SMIL, think of it as a way to piece together your media files in the order you would like them to appear, and then combine them into a single stream. So if you have a video and an audio file, you can combine the two so they will play together using SMIL. If you'd like to learn more about using SMIL, you might want to check out my SMIL tutorial.

There are a few different types of files that SMIL can use to combine multimedia elements into one presentation. One of these is called RealPix -- a component that allows you to orchestrate any number of digital images and add various effects to them. You then call on the RealPix file in your SMIL file, and the presentation is pieced together as a single stream. The demonstration for this article uses three components that are displayed within the RealPlayer window embedded onto the HTML page: a RealAudio clip, a RealPix file, and the SMIL file that pieces the two together. I used SMIL to associate a given graphic with its corresponding RealAudio and RealPix file that I created for each chord. All the user has to do is click on a given image to find out what that chord looks and sounds like.

So with a dash of JavaScript know-how, a pinch of SMIL, two cups of HTML, and a teaspoon of graphic design skill, you've got yourself a recipe for a nice way to present your media files within your own chosen environment. What's great about this recipe is that your presentations can vary tremendously; you aren't limited to formatting within a table, and you can place your elements wherever you please. Until RealPlayer allows for skin-authoring in their player ala QuickTime 5, this is a relatively easy way to spice up the presentation of your Real media.

Steve McCannell is a writer/producer for the O'Reilly Network and the founder of Lost Dog Found Music.

Return to the JavaScript DevCenter