Adding Windows Media to Web Pages

Microsoft Corporation

December 2000

Summary: This article shows how easy it is to add Windows Media to a Web page, and provides a glimpse at how far you can go in creating a total user experience. (10 printed pages)

Contents

• Introduction
• Creating a Windows Media Metafile
• Adding a Simple Link
• Embedding Windows Media Player
  • Using the Version 7 Control
  • Using the Version 6.4 Control
• Adding PARAM Elements
• Adding Scripting
• For More Information

Introduction

Microsoft® Windows Media® Technologies is made for the Web. With Windows Media encoding tools, you have control of the Windows Media files and live streams that you create. With Windows Media Player and the player programming interface, you have complete control of the end user experience.

In this article, you will see how easy it is to add Windows Media to a Web page, and you will get glimpse at how far you can go in creating a total user experience.

To try the examples in this article, you should install Windows Media Player version 7. This version of the player also includes the functionality of version 6.4, so you can take advantage of what both versions have to offer. Some of the examples work with either version of the player and some are specific to version 7. Sections of the article that contain information specific to version 7 will be noted. You can download Windows Media Player 7 from the Windows Media Web site.

Creating a Windows Media Metafile

The first step in adding Windows Media to your Web page is to create one or more Windows Media metafiles, which are simple text files with .wax, .wvx, or .asx file name extensions. In general, you create one metafile for each Windows Media file or stream. For example, if you have a video file named BigSur.wmv, you create a metafile named BigSur.wvx.

Metafiles act as redirector files. When adding a link to a Web page, you do not insert the URL (Uniform Resource Locator) of the file; instead, you link to the metafile. The metafile contains the URL of the file. When an end user clicks a link, the browser downloads the small metafile. The contents of the metafile are then sent to Windows Media Player, which handles connecting to the server and playing the digital media.

You need to use metafiles because you cannot be certain that the digital media will play as expected with a direct link. Recent versions of Microsoft Internet Explorer will stream audio and video properly, but other browsers may attempt to download the file, open it as a Web page, or give the end user an error message. If you use metafiles, you can be assured that the digital media will stream properly.

Windows Media metafiles can be created using a text editor like Microsoft Notepad. The following is an example of a simple metafile script:

<ASX version = "3.0">
<Entry>
    <Ref href = "mms://WindowsMediaServer/MyFile.wmv" />
</Entry>
</ASX>

Metafiles use an XML-based scripting language that includes a rich set of properties and functions. In this example, the metafile simply instructs Windows Media Player to play one file, MyFile.wmv:

The ASX element defines the enclosed script as being part of a Windows Media metafile.

The Entry element specifies the digital media.

The Ref href element specifies the URL of the media. MMS is the Windows Media streaming protocol that is recognized by Windows Media Services.

Metafiles can contain multiple Entry elements, enabling you to create playlists. Metafiles can also contain elements that control how the digital media plays and add text properties and links to the Windows Media Player interface. For more information, see the Windows Media metafile reference in the Windows Media Player Software Development Kit (SDK).

After entering the script in your text editor, save the file with one of the following file name extensions:

In this example, the metafile can be named MyFile.wvx. Although you do not have to use the same name for both, doing so can help keep things organized when you have many files.

After you create the metafiles, publish them to a location on your Web server so they can be accessed from your Web page. The next step is adding a simple link.

Adding a Simple Link

The easiest—and often the best—way to play a Windows Media file or live stream from a Web page is to insert a simple hyperlink to the metafile. When an end user clicks the link, Windows Media Player opens and the digital media plays, assuming Windows Media Player is installed on the end user's computer.

The following HTML script example contains a link to MyFile.wvx.

<html>
<head>
<title>Windows Media Player Simple Link</title>
</head>
<body>
Click <a href="https://WebServer/MyFile.wvx"> here</a> to play a nice file.
</body>
</html>

With a simple link, the digital media plays outside the browser in the full Windows Media Player or a skin. Being separated from the browser has its advantages. For the end user, the main advantage is that she can continue to use her browser to surf to other sites while continuing to play the media. With the full mode player, she has complete control over playback and can use any of the player features. For a Web developer, the main advantage is simplicity. All that you need is one simple link, which can take up very little space on a page. The alternative is to embed Windows Media Player.

Embedding Windows Media Player

You can build Windows Media Player into a Web page by embedding it. The first advantage of embedding is that you have complete control over the look of the player and how it functions—in other words, the entire user experience. You can create a player that works with the design of a page, and you can expose only those functions that are appropriate. You can, for example, expose only two buttons—play and stop—and set the player to play only one file.

The second advantage of embedding is that along with being able to control the player with Web page script, you can add script that enables you to control the Web page with the player. You can, for example, add script commands to a Windows Media file or live stream that changes images in a frame or sends Dynamic HTML commands to Microsoft Internet Explorer in synchronization with the media. For more information about using script commands, see the MSDN® article Windows Media Player—Advanced Scripting for Cross-Browser Functionality.

Note Embedding Windows Media Player in a Web page gives you complete control of the user experience within a browser. If you want control of the user experience outside the browser, you can create custom player skins. For more information, see the MSDN article Creating Custom Skins for the New Windows Media Player 7.

Using the Version 7 Control

To embed Windows Media Player, you add an OBJECT element for the Windows Media Player ActiveX® control. End users who have Windows Media Player installed on their computers can open your Web page and the OBJECT element will open the player control in the page. The following HTML example opens the Windows Media Player 7 control with a set size of 320 by 240 pixels:

<HTML>
<HEAD>
<TITLE>Embedded Windows Media Player Control</TITLE>
</HEAD>
<BODY>
<OBJECT ID="Player" width="320" height="240"
  CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
</OBJECT>
</BODY>
</HTML>

The CLASSID number is unique to version 7 of the Windows Media Player control. If an end user has an older version, the player will not open. Version 7 has a unique ID because the new player has an improved scripting model that is not compatible with older versions. If you are using the new scripting model, the unique ID prevents users with older players from getting script errors when they attempt to open the page. You can add script, such as the following VBScript example, to test for the presence of version 7. If version 7 is not installed, a message box opens to tell users how to install it:

<SCRIPT LANGUAGE="VBScript">
<!--
 On error resume next
   Player.URL = ""
   if err then msgbox "You need Windows Media Player 7." & chr(13) &_
        "Go to https://www.microsoft.com/windowsmedia"
     err.clear
-->
</SCRIPT>

If Windows Media Player 7 cannot be opened, an error is raised when the Player.URL method is called. The If statement tests for the presence of an error and opens a message box if one occurs.

Using the Version 6.4 Control

The alternative is to embed the version 6.4 ActiveX control. Because version 6.4 functionality is included in the version 7 installation, any version 6.4-compatible script you add will be compatible with either version of Windows Media Player. There are also other reasons why you may want to use version 6.4-compatible script:

Your end users cannot install version 7. The new version of the player cannot be installed on older Microsoft operating systems, such as Windows® 95 and Windows NT®.

You want to support Netscape browsers. Version 7 does not include a plug-in for Netscape Web browsers.

You plan to embed the control in an application. Version 7 does not support embedding the control using Microsoft Visual Basic® or Visual C++®. This does not directly relate to Web page embedding, but it is useful to know if you plan to create programs that use the control.

By embedding the version 6.4 ActiveX control and Netscape plug-in, users with any Microsoft operating system and the most popular browsers can install and open Windows Media Player in your Web page. Most of the functionality of the embedded version 7 player is also available in version 6.4. We suggest you use version 7. But if there is a reason why you cannot, version 6.4 works equally well for most situations where it is used for embedding.

To embed the version 6.4 control in a Web page, you use an OBJECT element with the version 6.4 CLASSID number. To add support for Netscape users, you add the version 6.4 plug-in with an EMBED tag. The following OBJECT element opens the version 6.4 player in Microsoft Internet Explorer or Netscape Navigator:

<OBJECT ID="MediaPlayer" WIDTH=320 HEIGHT=240
  CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95"
  STANDBY="Loading Windows Media Player components..." 
  TYPE="application/x-oleobject">

<EMBED TYPE="application/x-mplayer2" 
    NAME="MediaPlayer"
    WIDTH=320
    HEIGHT=240>
  </EMBED>

</OBJECT>

Using the CODEBASE attribute

If you are embedding the version 6.4 player, you can add a CODEBASE attribute to the OBJECT element. With CODEBASE added, a check is done to determine the presence of Windows Media Player on an end user's computer. CODEBASE specifies a URL, and can specify a version. If the correct version of the player is not installed on the computer, it is installed automatically from the location given in the URL.

The following CODEBASE script automatically installs the correct version 6.4 player from the Microsoft Web site.

CODEBASE="https://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112"

Adding PARAM Elements

With Windows Media Player embedded in your Web page, you can add script that controls the player's look and functionality. The PARAM element enables you to specify certain player properties when the page opens. You can specify properties such as the name of the file or URL that you want the player to open, and how you want the player to appear.

The following version 7 script example uses the PARAM element to set the AUTOSTART property of the player to TRUE, and the URL property to the location of a Windows Media metafile:

<HTML>
<HEAD>
<TITLE>Embedded Windows Media Player 7 Control</TITLE>
</HEAD>
<BODY>
<OBJECT ID="Player" width="320" height="240"
  CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
  <PARAM name="autoStart" value="True">
  <PARAM name="URL" value="https://WebServer/MyFile.wvx">
</OBJECT>
</BODY>
</HTML>

With AUTOSTART enabled, the file or stream specified by the URL plays automatically as soon as the player control opens.

The same functionality can be added to the version 6.4 control and plug-in with the following script:

<HTML>
<HEAD>
<TITLE>Embedded Windows Media Player 6.4 Control</TITLE>
</HEAD>
<BODY>
<OBJECT ID="MediaPlayer" WIDTH=320 HEIGHT=240
  CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95"
  STANDBY="Loading Windows Media Player components..." 
  TYPE="application/x-oleobject"
CODEBASE="https://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">

  <PARAM name="autoStart" value="True">
  <PARAM name="filename" value="https://WebServer/MyFile.wvx">

<EMBED TYPE="application/x-mplayer2" 
    SRC="https://WebServer/MyFile.wvx"
    NAME="MediaPlayer"
    WIDTH=320
    HEIGHT=240>
  </EMBED>
</OBJECT>
</BODY>
</HTML>

Note that the only difference besides the version 6.4 OBJECT attributes is the name of the method for opening media: Filename. The SRC attribute is used to specify the URL for the plug-in. The functionality between the two versions is very similar. The main difference is in the organization of the script functions and the look of the player. In version 7, the control is split into subcontrols. For more information, see the Windows Media Player SDK.

Adding Scripting

With the Windows Media Player control embedded and PARAM properties set, you can add script that controls player functions. The following script adds two input buttons:

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

The buttons work with the following Microsoft JScript® script to start and stop the player:

<SCRIPT>
<!--
   function StartMeUp ()
   {
       Player.URL = "https://WebServer/MyFile.wvx";
   }

   function ShutMeDown ()
   {
       Player.controls.stop();
   }
-->
</SCRIPT>

The following complete HTML script embeds the Windows Media Player 7 control, sets the URL PARAM, embeds two buttons, and contains scripting to make the buttons work. It also contains script to pop up a message box if an end user does not have the version 7 player installed.

<HTML>
<HEAD>
<TITLE>Embedded Windows Media Player 7 Control</TITLE>
</HEAD>
<BODY>
<OBJECT ID="Player" width="320" height="240"
  CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
  <PARAM name="URL" value="https://WebServer/MyFile.wvx">
  <PARAM name="uiMode" value="none">
</OBJECT>
<BR>
<INPUT TYPE="BUTTON" NAME="BtnPlay" VALUE="Play" OnClick="StartMeUp()">
<INPUT TYPE="BUTTON" NAME="BtnStop" VALUE="Stop" OnClick="ShutMeDown()">
<SCRIPT>
<!--
   function StartMeUp ()
   {
       Player.controls.play();
   }

   function ShutMeDown ()
   {
       Player.controls.stop();
   }
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
 On error resume next
   Player.URL = ""
   if err then msgbox "You need Windows Media Player 7. Go to" & chr(13) &_
        "https://www.microsoft.com/windowsmedia"
     err.clear
-->
</SCRIPT>
</BODY>
</HTML>

Note that the uiMode property was also added as a PARAM. With this property set to none, the player opens without any controls.

You can adapt this script for the version 6.4 control and plug-in by substituting the OBJECT elements, adding the plug-in elements, and changing two player methods. In the StartMeUp function change the method to Player.play(), and in the ShutMeDown() function to Player.stop(). Both of these changes are related to the reorganization of the functions in version 7.

For More Information

For additional information about using Windows Media in a Web page, see the following:

For more information about using script commands, see the MSDN® article Windows Media Player—Advanced Scripting for Cross-Browser Functionality.

For more information about creating custom skins, see the MSDN article Creating Custom Skins for the New Windows Media Player 7.

For more information about the Windows Media Player object model, see the Windows Media Player SDK, which is part of the Windows Media SDK.

The Windows Media Player 7 Handbook, from Microsoft Press, contains information about the Windows Media Player, including how to use the Player, create skins, and embed the Player in Web pages and programs. For more information, see your favorite online bookseller.