Windows Media Player Control SDK Banner Art
*Contents *Index  *Topic Contents

*Previous Topic: Controlling the Windows Media Player from Scripts
*Next Topic: ASX Files for Faceplates

Faceplate Layout in DHTML

The user interface for a Microsoft® Windows Media™ Player faceplate is a Web page written in dynamic HTML (DHTML). The page should be designed to generate events which trigger certain scripts contained in the page. These scripts in turn control playback and the presentation of any information specific to the media file. Because DHTML allows you to change the text and graphics of a Web page after it has loaded, you can change the appearance of the faceplate as the Windows Media Player performs different tasks. Because the faceplate is a Web page, it can also contain hyperlinks to informational and storefront Web sites, and these can with each media file being played.

To make a good faceplate, you need some knowledge of DHTML and Cascading Style Sheets (CSS). Microsoft's SiteBuilder Network has excellent reference material on both of these topics. You will also need some good graphical editing tools, because faceplates can use images for both interface elements and pictures related to the media. With these tools in hand, constructing a faceplate is not much different from constructing a Web page.

This article contains the following sections.

Positioning Faceplate Elements

The Windows Media Player allows you to specify the size and positioning of its display window with the STYLE parameter of its OBJECT tag. This is especially useful for creating custom video displays, where the video display window must be in a certain location on the page. The following OBJECT tag creates a video display that is 320 pixels wide by 240 pixels high, positioned 70 pixels below the upper-left corner of the screen.

<OBJECT ID="MediaPlayer"
    CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
    WIDTH="320" 
    HEIGHT="240"
    STYLE="position:absolute; 
        left:0px;
        top:70px;"
    >
    <PARAM NAME="FileName" VALUE="../art/media/lunchtime.asf">
    <PARAM NAME="AutoStart" VALUE="0">
    <PARAM NAME="ShowControls" VALUE="0">
    <PARAM NAME="ShowStatusBar" VALUE="0">
    <PARAM NAME="ShowDisplay" VALUE="0">
</OBJECT>

For this instance of the Windows Media Player control, the ShowControls, ShowStatusBar, and ShowDisplay properties have been set to 0. This disables the standard user interface for the Windows Media Player, leaving only the video display window showing.

Any faceplate you construct will contain a number of text and image elements, which could be user interface buttons, descriptive text, hyperlinked text, or Windows Media Player display windows. You can position these elements in any way you like, to produce whatever layout you find most appealing. For the most precise control over positioning, it is common to use nested SPAN and DIV tags. Each of these tags can act as a container for graphics or text, and with the STYLE attribute you can position the element exactly on the faceplate.

The following is a section of a faceplate file that uses this positioning method for an "Author" text field.

<DIV STYLE="position:absolute; 
    left:100px; 
    top:50px;
    width:200px; 
    height:133px;" >
    <SPAN ID="authorField"
        STYLE="position:absolute;
            left:44px;
            top:90px;
            width:50px;
            height:16px;
            font-size:9px;
            color:6699cc;
            text-align:left;" >
   Author:
   </SPAN>
</DIV>

The DIV in the above example is 200 by 133 pixels, located 100 pixels from the left and 50 pixels from the top of the upper left corner of the faceplate. It acts as a container for the enclosed SPAN tag, which specifies a region to display author information for the faceplate. Although the STYLE parameter for the SPAN tag specifies absolute positioning, the coordinates are relative to the enclosing DIV tag. This behavior allows you to group elements within a container and move them all without changing their relative positions. For text display, you can also specify different fonts, font sizes, colors, or alignments.

The SPAN tag in the above example specifies an ID parameter, so that the text it contains can be modified later by scripts when the Windows Media Player opens a new file. For this tag, a script command that modifies the text would look like the following. 

authorField.innerText = "Author: " + MediaPlayer.GetMediaInfoString(9);

Connecting the Faceplate to the Windows Media Player

In addition to specifying STYLE attributes, with DHTML you can specify event handlers for the DIV and SPAN tags. These events can be mouse clicks or keystrokes initiated by the user which cause certain Windows Media Player actions to happen. They can also initiate changes to the faceplate graphics.

A common user interface element for a faceplate would be a play button. In DHTML, this is how a tag which specifies event handler scripts might look.

<SPAN ID="PlayButtonSpan"
    STYLE="position:absolute;
        left:493px;
        top:216px;
        width:35px;
        height:31px;"
    onClick="onPlay()"
    onMouseOver="onPlayMouseOver()"
    onMouseOut="onPlayMouseOut()" >
    <IMG NAME="PlayButton" 
        WIDTH=35 
        HEIGHT=31 
        SRC="../art/demo2/play_N.GIF" >
</SPAN>

As before, the STYLE attribute specifies the size and position of the button. In this example, however, there are three event handlers specified for any mouse events that may occur on the region of the SPAN tag.The onMouseOver event happens when a user moves the mouse into the SPAN tag, and the onMouseOut event happens when the mouse moves out of that region. Each of these events calls a script function which switches the graphic used for the play button, indicating to users that this region of the screen controls a function for the Windows Media Player.

The onClick event happens when a user clicks the mouse button once over the region. For this button, the event causes the onPlay function to be called. This function, which is defined in the script, is shown below.

function onPlay()
{
    if(MediaPlayer.PlayState != 2)
    {
        MediaPlayer.Play();
        playBtn.SelectActive();
        pauseBtn.SelectNormal();
        stopBtn.SelectNormal();
        startTrackbar();
    }
}

First the script checks to see whether the Windows Media Player is already playing a file. If not, it calls the Windows Media Player Play method to start playback of the current file. The next three script calls are functions that change the graphics of the play button, pause button, and stop button to reflect the current play state of the Windows Media Player. The last script call starts another script which monitors the progress of the playback and displays the elapsed and total playback time in text on the faceplate.

Event handlers for events such as onClick can also be created for the Windows Media Player object. For more information, see Handling Events.

Top of Page Top of Page
© 1999 Microsoft and/or its suppliers. All rights reserved. Terms of Use.