Index Topic Contents | |
Previous Topic: Faceplate Help Strings Next Topic: How to Create a Faceplate with Basic Controls |
How to Create a Simple Faceplate
This article walks through the code used to create a basic faceplate. The faceplate consists of a standard Microsoft® Windows Media™ Player object in a window, with a centered title placed above the Windows Media Player. The window itself has a title and standard Close and Minimize buttons. To view the sample, see Simple Faceplate in the Samples section.
This article contains the following sections.
Creating an HTML Application
The file begins like an ordinary HTML file, but includes an in-line script and an HTA:APPLICATION tag, as shown below.
<HTML> <HEAD> <SCRIPT> window.resizeTo(330,448); </SCRIPT> <TITLE>Media Player Faceplate</TITLE> <HTA:APPLICATION CAPTION="true" MAXIMIZEBUTTON="no" > </HEAD>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 was introduced with Microsoft® Internet Explorer 5 to be used with the HTA file type. With this tag you can specify properties of the HTML application and the browser window it shows to users. It must be located inside the HEAD tag of any HTA file. Setting the CAPTION attribute to true produces the 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 much smaller faceplate. There is a Minimize button on the menu bar by default; it can be disabled by setting the MINIMIZEBUTTON attribute to no.
Embedding the Windows Media Player
The remainder of the file displays the faceplate title and positions the Windows Media Player control in the page. The complete sample code is show below.
Sample Code
<HTML> <HEAD> <SCRIPT> window.resizeTo(330,448); </SCRIPT> <TITLE>Media Player Faceplate</TITLE> <HTA:APPLICATION CAPTION="true" MAXIMIZEBUTTON="no" > </HEAD> <BODY SCROLL="no"> <CENTER> <B>A Simple Faceplate</B> </CENTER> <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>Setting the SCROLL parameter of the BODY tag to no eliminates the scroll bars from the page, which maximizes the usable area of the faceplate. The faceplate title is simply HTML text centered at the top of the page. The OBJECT tag creates an instance of the Windows Media Player control with all standard interface controls enabled. The STYLE attribute provides precise positioning.
The Windows Media Player control object is initialized with a series of PARAM tags that set the values of several properties. The most important of these is the FileName property, which specifies which file the Windows Media Player will use for playback. The file can be a single media file (such as an .avi or .asf file), or an Advanced Stream Redirector (ASX) file that lists several media files to be played in a certain order. The AutoStart property is set to 0, indicating that the Windows Media Player should not start playing the file right away. Finally, the ShowControls, ShowStatusBar, and ShowDisplay properties indicate that the Media Player should display its standard user interface, in order for the user to control and monitor playback from the Web page.
What Next?
This sample was intended as the most basic example of a Windows Media Player faceplate. With a little more work, you can give your faceplate a customized appearance and user control. The Faceplate with Basic Controls uses graphical buttons and dynamic HTML (DHTML) events to control the Windows Media Player.
For more information on Internet Explorer HTML Applications, see the overview and reference pages on Microsoft's SiteBuilder Network.
Top of Page
© 1999 Microsoft and/or its suppliers. All rights reserved. Terms of Use.