Using the Control in a Web Page

Being an ActiveX control, the Media Player control makes use of Automation to expose methods and properties and provide event support. While ActiveX controls, like the Player control, can be used as components in a wide variety of programming environments, they are extremely well-suited for use in Web pages. ActiveX controls can be used to add exciting dynamic content to previously static Web pages, and they are easy to distribute over networks.

By using a scripting language such as VBScript or JScript, it is easy to embed the Media Player control in an HTML Web page. This section explains how to embed the Media Player control into an HTML page and use VBScript routines to manipulate it.

Inserting the Player Control

The <OBJECT> tag is used to embed ActiveX objects like the Media Player control into an HTML page. Following is an example of using the <OBJECT> tag to insert the Player control.

<OBJECT ID="MediaPlayer1" WIDTH=320 HEIGHT=240
 CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95">
 CODEBASE="http://www.microsoft.com/netshow/download/en/nsasfinf.cab
#Version=5,1,51,115">
</OBJECT>

The following <OBJECT> tag attributes are required:

ID - The name used to reference this instance of the control.
CLSID - The Global Class Identifier (CLSID) of the Media Player control.
HEIGHT and WIDTH - The height and width of the control in pixels. These attributes are required; however, in most cases their values are ignored by the control.

Using the CODEBASE attribute is strongly recommended. It contains a URL pointing to where the Player control can be found if it is unavailable on a user's system. Besides the address of the player object, the CODEBASE attribute may also optionally specify a version number of the control.

The Player control is available on Microsoft's Web site packaged as a .cab (cabinet) file. The .ocx file containing the control, along with the codecs needed to support the control, are compressed into the cabinet. An .inf file included in the cabinet specifies the files that need to be downloaded, and performs the setup for the control to run.

Setting Control Properties with the Param Tag

One option for setting the properties of a control in a Web page is adding <Param> tags between the <Object> and </Object> tags. This is an ideal method for setting design time properties. Following is an example of the previous <Object> tag with some <Param> tags added:

<OBJECT ID="MediaPlayer1" WIDTH=320 HEIGHT=240
 CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95">
 CODEBASE="http://www.microsoft.com/netshow/download/en/nsasfinf.cab
#Version=5,1,51,115">
 <Param Name="FileName" Value="C:\ASFRoot\Welcome.asf">
 <Param Name="ShowControls" Value="False">
 <Param Name="AutoRewind" Value="True">
 <Param Name="AutoStart" Value="False">
</OBJECT>

The <Param> tags used in our example have two fields; the first is the name of the property being set, and the second specifies the value the property is set to. In the example above, the first <Param> tag sets the FileName property to C:\ASFRoot\Welcome.asf. The remaining <Param> tags change the default values of the AutoRewind property to TRUE and the ShowControls and AutoStart and properties to FALSE.

Adding a Simple User Interface for the Control

Adding a few buttons is the simplest way to demonstrate Player control operation. Add the following three button controls to the body of your HTML page: one to start the Player control, one to stop it, and one to display the current version of the Player control.

<INPUT TYPE="BUTTON" NAME="BtnPlay" VALUE="Play">
<INPUT TYPE="BUTTON" NAME="BtnStop" VALUE="Stop">
<INPUT TYPE="BUTTON" NAME="BtnAbout" VALUE="About">

Adding the Scripting Code

Scripting code adds interactivity to your page, allowing you to programmatically respond to events, call methods, and change run-time properties. First, you must notify the browser which scripting language you intend to use with a <SCRIPT> tag. Include the script commands within a comment so browsers that do not support scripting will not interpret your code as text and display it on the page.

For this sample, VBScript is used. Put the <SCRIPT> tag anywhere in the BODY and embed the comment-surrounded code within the <SCRIPT> and </SCRIPT> tags. The following code calls the Player control methods in response to events triggered by clicking the button controls.

<SCRIPT LANGUAGE="VBScript">
<!--
Sub BtnAbout_OnClick
   MediaPlayer1.AboutBox()
End Sub
Sub BtnPlay_OnClick
    MediaPlayer1.Play
End Sub
Sub BtnStop_OnClick
    MediaPlayer1.Stop
    MediaPlayer1.CurrentPosition = 0
End Sub
-->
</SCRIPT>

Each subroutine is attached to a specific button that was defined in the FORM section. When an event is triggered by a button being clicked, the code makes a call (or series of calls) to the Player control.

Simple Player Control Web Page

Combining the elements discussed previously in this section and adding them to a Web page, you can see how the pieces fit together.

<HTML>
<HEAD><TITLE>Media Player Test</TITLE></HEAD>
<BODY>
<OBJECT ID="MediaPlayer1" WIDTH=320 HEIGHT=240
 CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95">
 CODEBASE="http://www.microsoft.com/netshow/download/en/nsasfinf.cab
#Version=5,1,51,115">
 <Param Name="FileName" Value="C:\ASFRoot\Welcome.asf">
 <Param Name="ShowControls" Value="False">
 <Param Name="AutoRewind" Value="True">
 <Param Name="AutoStart" Value="False">
</OBJECT>
<BR>
<INPUT TYPE="BUTTON" NAME="BtnPlay" VALUE="Play">
<INPUT TYPE="BUTTON" NAME="BtnStop" VALUE="Stop">
<INPUT TYPE="BUTTON" NAME="BtnAbout" VALUE="About">
<SCRIPT LANGUAGE="VBScript">
<!--
Sub BtnAbout_OnClick
   MediaPlayer1.AboutBox
End Sub
Sub BtnPlay_OnClick
    MediaPlayer1.Play
End Sub
Sub BtnStop_OnClick
    MediaPlayer1.Stop
    MediaPlayer1.CurrentPosition = 0
End Sub
-->
</SCRIPT>
</BODY>
</HTML>

Try this code with a multimedia file on your computer. Copy and paste this code into a text file and change the FileName <Param> tag to specify the relative path and protocol of the file you wish to play.