Simple Example of Scripting in a Web Page
[The feature associated with this page, Windows Media Player SDK, is a legacy feature. It has been superseded by MediaPlayer. MediaPlayer has been optimized for Windows 10 and Windows 11. Microsoft strongly recommends that new code use MediaPlayer instead of Windows Media Player SDK, when possible. Microsoft suggests that existing code that uses the legacy APIs be rewritten to use the new APIs if possible.]
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 webpage using the following four steps:
- Create the webpage.
- 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 webpage. 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 webpage, 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:
ID
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 webpage.
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 webpage 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.
Related topics