If your idea of new tricks involves using JavaScript, RealMedia is up to the challenge. RealPlayer includes a number of hooks to make the player obey your commands.

In this tutorial, I will be using JavaScript to create a simple custom interface for my streaming media content. Hopefully you will find these simple steps an inspiration for your further exploration of JavaScript functionality in RealPlayer. One NOTE: Users of RealPlayer for Macintosh have had problems trying to play embedded content when viewing the target Web page with Internet Explorer. If you are a Mac user, and have any such problems with this article please try using Netscape to view the page instead.

Setting Up the <EMBED>
I begin by making some assumptions. I am assuming that you have already converted your digital media to RealMedia and have embedded that content into a Web page. If not, revisit my earlier tutorial on working with RealMedia before beginning.

If you are familiar with basic JavaScript, you know that the scripting language allows you to reference and manipulate objects within the browser document. In a classic rollover, JavaScript allows you to name a graphic, reference that graphic with the script, and change the graphic dynamically when the user rolls their mouse over a link.

Much like setting up a graphic rollover, our first step in hooking into the RealPlayer’s JavaScript power involves naming the plug-in instance. This is done simply by slipping a NAME attribute into the <EMBED> tag:

In the example above, the <EMBED> tag does little more than display a window with the RealMedia content. To play the content, I would have to click the window and pull up "Play" from the contextual menu. Instead, I will add a few buttons and let JavaScript do the work. Now that we have the RealMedia object named ("libertyclip" in this example) I am ready to hook into that object with JavaScript.