Creating and Embedding a Customized Player, Part I

Implementing an embedded customized media player can seem like a daunting task. Within this tutorial series, it will become clear that, with standard coding knowledge, embedding a player can be accomplished with relative ease. The challenges arise from more traditional issues, such as DHTML cross-browser compatibility.

The vast amount of flexibility an embedded player allows will often justify the time it takes to build one. A wide array of properties, methods, and events are exposed, allowing for branding and synchronization capabilities impossible with stand-alone players.

The following tutorial will provide a case study for building a custom player from the ground up. The procedures will be separated into parts; each describing specific characteristics and attributes of the custom player.

Note: This tutorial requires intermediate knowledge of Internet Explorer DHTML using CSS and Javascript. You will be required to have Internet Explorer 4.72+, RealPlayer G2+, and Windows Media Player 6+ installed on your machine.

Before we get started, you may want to look at the full version of the player (Real), here

To follow along through this tutorial, please download a full version of the code and graphics here

In the course of this case study, the RealPlayer Embedded SDK will also prove useful. Download the SDK here.

Outline and Player Design
The following is a basic outline of the pieces within this embedded player.

1. Formatting and Framework
2. Media Player ActiveX Control
3. Media Player Full, Play, Pause, and Stop Controls
4. Media Player Volume Control
5. Media Player Clock and Bandwidth Properties
6. Media Player Clip Information Properties
7. Transition to the Windows Media Player

We'll analyze the first three items (and the basis for item 4) in this first tutorial installment. Additional items will be discussed in forthcoming articles.

Formatting
Exact positioning of elements becomes essential when creating a custom player. The more functionality offered, the higher priority this takes.

In this case study, all formatting is done using CSS. The only HTML formatting elements included here are breaks used in the spacing of the player control buttons. All elements are contained within unique DIVs.

Below is an example of the first DIV used in the case study:

filename: smplayer.html<!-- Begin Player Background Div --><div id="divPlayerBackground" class="clsPlayerBackground"><img src="images/player_background.gif" width="550" height="410" alt="" border="0"></div><!-- End Player Background Div -->The corresponding style sheet class looks like this:

filename: include/style.css.clsPlayerBackground { POSITION: absolute; LEFT: 0px; TOP: 0px; Z-INDEX: 4;}

We set the Z-INDEX equal to 4, placing the background image behind everything else. All other elements in this player will appear on top of this background image, requiring a Z-INDEX equal to 5 or greater.

Figure 1.0 - Player Background Image

Embedding the Media Player ActiveX Control
The insertion of the Media Player ActiveX control is where the "embedding" takes place. In the literal sense, this is the only tag required to have an embedded player. The other parts of the application, however, extend it and make use of it.

The following is the Media Player DIV with the <object> tag used to embed the RealPlayer:

filename: smplayer.html<!-- Begin Media Player Div --><div id="divMediaPlayer" class="clsMediaPlayer"><!-- Media Player Object Tag --><object id="objMediaPlayer" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="320" height="240"> <param name="SRC" value="INSERT STREAM SOURCE HERE"> <param name="CONSOLE" value="one"> <param name="CONTROLS" value="ImageWindow"> <param name="BACKGROUNDCOLOR" value="black"> <param name="CENTER" value="true"></object></div><!-- End Media Player Div -->

The "id" parameter of the "object" tag is essential. All properties, methods, and events of the player are accessed through this name. The "classid" parameter of the "object" tag is the unique identifier for the ActiveX control. There's no need to spell-out "RealPlayer" or anything of the sort. This is the only information we need as the client machine takes care of locating and loading the proper ActiveX control.

Between the <object> tags, we include tags, which define certain load parameters for the ActiveX control. The SRC param defines the path to the source media file -- in this case a .ram file. The CONSOLE param specifies that only one ActiveX control be loaded at this time. This would be changed for instances when you want multiple controls loaded on the same page. The CONTROLS param tells the ActiveX control not to display the Media Player Controls, as we will be defining our own image controls. The next two params, BACKGROUNDCOLOR and CENTER are pretty self explanatory, specifying the background color of the control and its justification, respectively.

The corresponding style sheet class aligns the ActiveX control within the black box of the player background. For future development's sake, it should be noted that nothing will appear above a player ActiveX control, even if the Z-INDEX property is set to do so. In order to give the effect of an element on top of an ActiveX control, we can dynamically write the <object> tag to a div, when required. This particular function, however, extends beyond the scope of our current project.

Media Player Image Controls
Here's when we dive into some of the more compelling aspects of custom players. For the purpose of this tutorial, I've created some rollover images relating to the controls to which they will be linked. These are FULL, PLAY, PAUSE, and STOP.

First we need to position them above the player background. The HTML is as follows:

filename: smplayer.html<!-- Begin Player Control Buttons Div --><div id="divButtons" class="clsButtons"><img name="button_full" src="images/button_full_off.gif" width="52" height="20" alt="" border="0" onMouseOver="imageSwap(this.name, 'over');" onMouseOut="imageSwap(this.name, 'off');" onClick="videoFullScreen()"></p><p><img name="button_play" src="images/button_play_off.gif" width="52" height="20" alt="" border="0" onMouseOver="imageSwap(this.name, 'over');" onMouseOut="imageSwap(this.name, 'off');" onClick="videoPlay()"><br><img name="button_stop" src="images/button_stop_off.gif" width="52" height="20" alt="" border="0" onMouseOver="imageSwap(this.name, 'over');" onMouseOut="imageSwap(this.name, 'off');" onClick="videoStop()"><br><img name="button_pause" src="images/button_pause_off.gif" width="52" height="20" alt="" border="0" onMouseOver="imageSwap(this.name, 'over');" onMouseOut="imageSwap(this.name, 'off');" onClick="videoPause()"></div><!-- End Player Control Buttons Div -->

The corresponding style sheet class aligns the buttons in the left panel of the player background.

At this point, the player looks like this:

Figure 2.0 - Player with Basic Controls and Embedded Media Player

Once we've defined the buttons to use as controls, we need to create a link between the player object and these images.

Javascript is the tool allowing us to access the properties methods and events of the player. If you reference the file, smplayer.html, you'll first notice the image rollover definitions and imageSwap function. Following the rollover code, you will see the global variable declarations.

// global variable declarationsvar bolIsPlaying;var intVolumeBarState=4;var idVideoClockTimer;

We're only concerned with the bolIsPlaying variable for this part of the tutorial. The bollsPlaying variable is used in other parts of the application to check whether the video is currently playing.

We need to create a series of functions that correspond to their relative controls. These functions are: videoFullScreen(), videoPlay(), videoPause(), and videoStop().

filename: smplayer.htmlfunction videoFullScreen(){ objMediaPlayer.SetFullScreen();}function videoPlay(){ objMediaPlayer.DoPlay(); bolIsPlaying = true; // Set boolean value true. We will need to see the video is playing later on. idVideoClockTimer = window.setInterval("intervalCalls()", 200); // This statement instantiates an interval timer, called every 200 milliseconds. This calls the function intervalCalls() which is used to update the video clock and bandwidth text as the video is playing.}function videoPause(){ objMediaPlayer.DoPause();}function videoStop(){ objMediaPlayer.DoStop(); bolIsPlaying = false; window.clearInterval(idVideoClockTimer); // Clear the interval and stop the thread.}

Again, we'll only concern ourselves with the pure Media Player functions here. Referencing our control buttons HTML, note where the functions are called through the onClick event in the corresponding image tags.

Looking at the function videoPlay(), note how to access a method of the RealPlayer ActiveX control. We have specified our Media Player object name, objMediaPlayer, and through standard dot notation called an exposed method, DoPlay(). Most properties, methods, and events of the player are called using this syntax. These properties, methods, and events are self-explanatory in their naming convention. All of them can be found in the RealPlayer ActiveX and Plugin SDK.

Note that we are setting the Boolean variable, bolIsPlaying, to either true or false respectively in the videoPlay() and videoStop() functions. Later on in the application, the state of this variable will be in a conditional expression.

Volume Control
By now we're getting an idea of how to embed a media player and provide users with basic controls. Additional functionality, such as Volume Control, requires a bit more thought, but the basic principal remains the same.

From this point forward, the majority of the programming is independent of the Media Player; meaning it has much more to do with traditional programming, formatting, and data manipulation than with the ActiveX control specifically.

Adding Volume Control is a somewhat essential feature in any custom player. The user should not be forced to rely on the system volume control for its manipulation.

For this tutorial, we will incorporate Volume Control with eight status bars, as seen below.

Figure 3.0 - Volume Control

This volume control is comprised of a Decrease Volume image, an Increase Volume image, their respective on-state images, and eight DIVs ranging from small to large. The status bars are simply masquerading as images and are actually the DIVs. It's much easier and faster to specify a DIV of a particular size and change the background color than it would be to create an image for each status bar.

The HTML code for the Volume Control is as follows:

<!-- Begin Volume Bar Div --><div id="divVolumeBars" class="clsVolumeBars"><img name="button_volume_up" src="images/button_volume_up_off.gif" width="17" height="14" alt="" border="0" onClick="volumeChange('increase');" onMouseDown="imageSwap(this.name, 'over');" onMouseUp="imageSwap(this.name, 'off');" class="clsVolumeUp"><div id="divVolumeBar1" class="clsVolumeBar1"></div><div id="divVolumeBar2" class="clsVolumeBar2"></div><div id="divVolumeBar3" class="clsVolumeBar3"></div><div id="divVolumeBar4" class="clsVolumeBar4"></div><div id="divVolumeBar5" class="clsVolumeBar5"></div><div id="divVolumeBar6" class="clsVolumeBar6"></div><div id="divVolumeBar7" class="clsVolumeBar7"></div><div id="divVolumeBar8" class="clsVolumeBar8"></div><img name="button_volume_down" src="images/button_volume_down_off.gif" width="17" height="14" alt="" border="0" onClick="volumeChange('decrease');" onMouseDown="imageSwap(this.name, 'over');" onMouseUp="imageSwap(this.name, 'off');" class="clsVolumeDown"></div><!-- End Volume Bar Div -->

You can see we have specified an empty DIV for each status bar of the Volume Control. Their size, position, and background color are defined in the style sheet.

A style sheet classes for a volume status bar looks like this:

.clsVolumeBar1 { POSITION: absolute; TOP: 8px; LEFT: 20px; HEIGHT: 3px; WIDTH: 3px; CLIP: rect(0px 3px 4px 0px); BACKGROUND-COLOR: red; Z-INDEX: 5;}

You may notice we have added a CLIP property in the style sheet class. Internet Explorer will not display a DIV as small as those required with only a WIDTH and HEIGHT property set. The CLIP property defines a rectangular crop area that allows us to achieve these smaller dimensions.

For Next Time
Next week we'll pick up where we've left off and get into the actual Javascript corresponding with the Volume Control, as well as the Video Clock and Bandwidth displays. We'll then take a look at making the transition to Windows Media.

Contributor Marco Bianco is CTO at OverDrive Media.OverDrive Media is a full service streaming media development house delivering world-class streaming media solutions. Our core competency is streaming media Web development. We deliver streaming media integration to existing sites, build complete Web solutions that leverage streaming media or manage streaming media projects as part of a larger team. A partial list of our services includes project conception and consulting, professional graphic design, database design and programming, custom Web application development, audio and video encoding and MacroMedia Flash.