Creating an HTML Application Faceplate

Windows Media Player Control SDK Banner Art

Contents Index  Topic Contents

Previous Topic: Faceplate Authoring Guide
Next Topic: Controlling the Windows Media Player from Scripts

The release of Microsoft® Internet Explorer 5 introduces the HTML Application (HTA), a new file type for the Microsoft® Windows® platform. The file name extension for HTA files is .hta. They use standard HTML formatting tags to display content and graphics, and allow user interaction through scripting. Although HTA files look much like standard HTML files, they incorporate the new HTA:APPLICATION tag to specify properties of the HTML application and the browser window. By setting browser window properties, the window can appear to users as a standard Windows application. Because a faceplate is an HTA file with an embedded Microsoft® Windows Media™ Player object controlled through scripts, it is much easier to create than a stand-alone Windows application.

To create an HTA file, create a standard HTML file and add an HTA:APPLICATION tag as shown below.

<HTML>
<HEAD>
    <SCRIPT>
        window.resizeTo(330,518);
    </SCRIPT>

    <TITLE>Media Player Faceplate</TITLE>

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

<BODY SCROLL="no">

<CENTER>
    <B>A Simple Faceplate</B>
</CENTER>

The one-line script within the SCRIPT tags resizes the window to the dimensions of the Windows Media Player and title area. This step is necessary because otherwise the window dimensions would use whatever default values were defined previously for Microsoft Internet Explorer, which probably are not the desired dimensions.

The HTA:APPLICATION tag must be located inside the HEAD tag of any HTA file. With this tag you can specify properties of the HTML application and the browser window it shows to users. Setting the CAPTION attribute to true produces a top menu bar, enabling users to reposition and close the browser window. Setting the MAXIMIZEBUTTON attribute to no disables the Maximize button on the menu bar. This prevents users from filling their entire screen with the browser window. There is a Minimize button on the menu bar by default; it can be disabled by setting the MINIMIZEBUTTON attribute to no.

The procedure for placing a Windows Media Player control in a faceplate is the same used for an HTML file. Next, place an OBJECT tag in the HTA file, as shown below. The OBJECT tag can be placed by itself or inside a TABLE, DIV, or SPAN tag. The following example creates a basic Windows Media Player object.

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

</BODY>
</HTML>

The object ID specified by the ID parameter is the name you will use to access this instance of the player through scripts. To use the version of the Windows Media Player included with this SDK, you must specify the CLASSID parameter as shown above.

The WIDTH and HEIGHT parameters specify the width and height of the entire display window used for the Windows Media Player object, including the control buttons, position trackbar, and video display panel. If you want to use the standard Windows Media Player user interface for your object, you may need to size this window to be a little taller than the actual video display window to make room for the control buttons and display panel. If you are going to use a custom user interface, you can hide the buttons and trackbar from view. When you do this, the width and height reflect the size of the video display window. If you are using the Windows Media Player for audio-only playback with your own user interface, you can hide the entire Windows Media Player object by setting the HEIGHT and WIDTH parameters to zero.

Within the OBJECT tag, you can also specify a number of initial settings with a series of PARAM tags. The NAME attribute in a PARAM tag corresponds to one of the Windows Media Player control properties. The most important of these is the FileName property, which specifies the media file for the Windows Media Player to use. There are many others properties, specifying which controls to show, whether the clip begins playing after the page loads, and other behaviors. Setting these properties during object creation is optional; if you prefer, you can set them later, in your script.

The Windows Media Player object also accepts STYLE settings, which are useful for positioning the viewing window. Styles are discussed in further detail in Faceplate Layout in DHTML.


Contents Index Topic Contents
Previous Topic: Faceplate Authoring Guide Next Topic: Controlling the Windows Media Player from Scripts