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

*Previous Topic: How to Create a Simple Faceplate
*Next Topic: Faceplate Samples

How to Create a Faceplate with Basic Controls

This article walks through the code used to create a faceplate with a custom user interface to the Microsoft® Windows Media™ Player control. The faceplate displays a play button, a stop button, and a pause button, each with its own script that operates the Windows Media Player control. To view the sample, see Faceplate with Basic Controls in the Samples section.

This article contains the following sections.

Laying Out the User Interface

Start by positioning and sizing the faceplate window, as shown in the following example.

<HTML>
<HEAD>

    <SCRIPT>
        var sampleWidth = 297;
        var sampleHeight = 292;
        window.resizeTo(sampleWidth,sampleHeight);

        var screenPosX = screen.availWidth/2 - sampleWidth/2;
        var screenPosY = screen.availHeight/2 - sampleHeight/2;
        window.moveTo(screenPosX, screenPosY);
    </SCRIPT>

    <TITLE>Windows Media Player Faceplate</TITLE>

    <HTA:APPLICATION 
        CAPTION="true"
        MAXIMIZEBUTTON="no">
</HEAD>

The script included here centers the window in the screen and sets it to the proper size for the Windows Media Player control. The attributes specified for the HTA:APPLICATION tag specify that the window will have a menu bar for repositioning, and disable the Maximize button so that the window size will remain the same.

The following tags lay out the title graphic and the Windows Media Player video display panel.

Sample Code

The title graphic is contained in a SPAN tag positioned near the upper left corner of the window. The Windows Media Player video display is positioned below the title and flush to the left of the screen. The PARAM tags set various properties of the Windows Media Player. The AutoStart and ClickToPlay properties are set to false, so that playback will be controlled entirely by the faceplate buttons (added later in the file). Also, note that unlike the Simple Faceplate, this faceplate sets the ShowControls, ShowStatusBar, and ShowDisplay properties to false. Doing so turns off the standard interface controls built in to the Windows Media Player, leaving only the video display panel showing. The custom user interface will take the place of the standard controls.

Adding Button Click Events

The following SPAN tags position the images for the play, pause, and stop buttons.

Sample Code

Much of the HTML in the above example is for positioning the buttons on the faceplate. However, note that each SPAN tag has an ONCLICK attribute that specifies a script command for the onClick event. This is the crucial link between dynamic HTML (DHTML) and the Windows Media Player object. When a user clicks on one of the spans containing a button graphic, it calls the specified script.

The scripts for the play and stop buttons are simple. The first calls the Play method, the other sets the CurrentPosition property to zero.

The script for the pause button is somewhat more complicated, because the button has a more complex behavior. If clicking the button called the Pause method and did nothing else, the user would have to click the play button to restart playback. Typically a pause button will also restart playback from a paused state, so it's a good idea for a custom faceplate to act the same way. The following script function makes the pause button toggle between calling the Play method and calling the Pause method. 

function onPause()
{
    if(MediaPlayer.PlayState==1)
        MediaPlayer.Play();
    else if(MediaPlayer.PlayState==2)
        MediaPlayer.Pause();
}
The value of the PlayState property reflects what the Windows Media Player is doing at any time. If the value equals 1, the Windows Media Player is in a paused state, and the above script responds by resuming playback. Otherwise, the Windows Media Player was not paused, and the script calls the Pause method.

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