Windows Media Player 11 SDK Simple Example of Scripting in a Web Page

Article
11/02/2006

Windows Media Player SDK banner art

Simple Example of Scripting in a Web Page

You can easily embed the Windows Media Player control in an HTML file using any scripting language your browser recognizes. The following simple example uses Microsoft JScript to create a page that will play a file when you click on a button, and stop playing the file when you click on another button.

You can embed the Windows Media Player ActiveX control in a Web page using the following four steps:

Create the Web page.
Add the OBJECT tag.
Add a user interface. In this case, two buttons.
Add a few lines of code to respond when the user clicks on one of the buttons you have created.

Creating the Web Page

The first step is to create a valid HTML Web page. The following code is the minimum needed to create a blank but valid HTML page:

<HTML>
    <HEAD>
    </HEAD>
    <BODY>
    </BODY>
</HTML>

Adding the OBJECT Tag

Once you have created a Web page, you need to add an OBJECT tag. This identifies the ActiveX control to the browser and sets up any initial definitions. You must place the OBJECT tag in the BODY of the code. If you place it in the BODY, the default user interface of Windows Media Player will be visible. If you want to create your own user interface, set the height and width attributes to 0 (zero). You can also set the Player**.uiMode** property to "invisible" when you want to hide the control, but still reserve space for it on the page. The following code is recommended when you provide a custom user interface:

<OBJECT ID="Player" height="0" width="0"
  CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
</OBJECT>

The following OBJECT tag attributes are required:

The name that will be used by other parts of the code to identify and use the ActiveX control. You can choose any name you want, as long as it is a name that is not already used by HTML, HTML extensions, or the scripting language you are using. In this example, the name Player is used, but you could also call it MyPlayer or something else. Just pick a name that is unique to that Web page.

CLASSID

A very large hexadecimal number that is unique to the control. Only one control has this number and it is the Windows Media Player ActiveX control. To prevent typographical errors, you can copy and paste this number from the documentation. Versions of the Windows Media Player control prior to version 7.0 had a different CLASSID.

Adding a User Interface

HTML allows a vast wealth of user interface elements, allowing the user to interact with your Web page by clicking, pressing keys, and other user actions. Adding a few INPUT buttons is the easiest way to provide a quick user interface. The following code creates two buttons that can respond to the user. Clicking one button starts the media stream playing and the other button stops it:

<INPUT TYPE="BUTTON" NAME="BtnPlay" VALUE="Play" OnClick="StartMeUp()">
<INPUT TYPE="BUTTON" NAME="BtnStop" VALUE="Stop" OnClick="ShutMeDown()">

The name of the button is used to identify the button to your code; the value is the label that will appear on the button, and the OnClick attribute identifies which part of your scripting code will be called when the button is clicked.

Adding Scripting Code

Scripting code adds interactivity to your page. Scripting code can respond to events, call methods, and change run-time properties. Extended scripts are enclosed in a SCRIPT tag set. The SCRIPT tag tells the browser where your scripting code is and identifies the scripting language. If you do not identify a language, the default language will be Microsoft JScript.

It is good authoring practice to enclose your script in HTML comment tags so browsers that do not support scripting do not render your code as text. Put the SCRIPT tag anywhere within the BODY of your HTML file and embed the comment-surrounded code within the opening and closing SCRIPT tags.

The following Microsoft JScript code example calls the Windows Media Player control and performs an appropriate action in response to the corresponding button click.

<SCRIPT>
<!--

function StartMeUp ()
{
    Player.URL = "laure.wma";
}

function ShutMeDown ()
{
    Player.controls.stop();
}

-->
</SCRIPT>

The example function, StartMeUp, is called when the button marked Play is clicked, and the ShutMeDown function is called when the Stop button is clicked.

The code inside StartMeUp uses the URL property to define a path to the media. The media will start playing immediately.

The ShutMeDown code calls the stop method of the Controls object. Note that the Controls object is called through the controls property of the Player object, which has the ID value of "Player".

The following code shows a complete example.

<HTML>
<HEAD>
</HEAD>
<BODY>
<OBJECT ID="Player" height="0" width="0"
  CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
</OBJECT>
<INPUT TYPE="BUTTON" NAME="BtnPlay" VALUE="Play" OnClick="StartMeUp()">
<INPUT TYPE="BUTTON" NAME="BtnStop" VALUE="Stop" OnClick="ShutMeDown()">
<SCRIPT>
<!--

function StartMeUp ()
{
    Player.URL = "laure.wma";
}

function ShutMeDown ()
{
    Player.controls.stop();
}

-->
</SCRIPT>
</BODY>
</HTML>

Note that you must provide a valid URL to a valid file name in the URL property. In this case the assumption is that the file laure.wma is in the same directory as the HTML file.

See Also

Using the Windows Media Player Control in a Web Page

Previous

Next