Windows Media Player SDK banner art
PreviousNext

Positioning Faceplate Elements

This topic applies to Windows Media Player version 6.4 only.

Windows Media Player allows you to specify the size and positioning of its display window with the STYLE attribute 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 zero. This disables the standard user interface for 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 attribute, so that the text it contains can be modified later by scripts when 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);
PreviousNext


© 2000-2001 Microsoft Corporation. All rights reserved.