Click Here to Install Silverlight*
United StatesChange|All Microsoft Sites
Windows Media Player 9 Series
|Windows Media Worldwide

Advertising Solutions: Embedding the
Windows Media Player in Web Pages

Abstract
Describes how to use streaming media for Internet advertising scenarios by embedding the Windows Media Player ActiveX control in a Web page for a rich multimedia experience. This article discusses the following implementation for embedding the Player control: adding streaming media to a Web page; creating a custom interface streaming media Player; and creating a streaming media banner for a Web page.

Microsoft Corporation
July 2004


Applies to:
   Microsoft® Windows Media® Player 9 Series
   Microsoft Windows Media Player 10

 

Contents



Introduction

Digital media is a popular method for delivering creative content on the Internet. As high-bandwidth Internet connections become more accessible and the quality of digital media continues to improve, more and more users and content providers are recognizing the vast potential of digital media for delivering not just content, but also advertising.

Experts have determined that after 50 years of television, people prefer watching information rather than reading it, and they retain more of the message when it's presented in a powerful, evocative way. Indeed, research confirms that streaming video and flash animation generate double the clickthrough rates of banner ads.

Microsoft® Windows Media® technologies make it easy for you to capture the attention of viewers through the addition of dynamic content to your Internet presence. By embedding the Microsoft ActiveX® control in Windows Media Player into a Web page, you may implement a range of different advertising solutions. By gathering data on the user, you can provide advertising solutions that are a content-rich, multimedia, and user-targeted experience.

You can create any one of the following options for your advertising needs:
  • Adding streaming media to a Web page.
    Adding streaming media to a Web page results in the Player being added to a Web page. This implementation enables you to make use of corporate branding, control the size of the Player so you can be sure that it integrates with your site design, and control the amount of interactivity users have with the Player.
    For an example of this implementation, see the MSN Video Web page (http://msnvideo.msn.com/video/default.aspx?m=vh&csid=Msnbc&t=News&c=NBC%20News&setcp=b).
  • Creating a custom interface streaming media Player.
    With Windows Media technologies, you can create a Player with a custom interface that also streams media according to your specifications. Your Player can incorporate fixed dimensions, as well as target ads and metadata-all displayed as you want. In addition, because the Player opens in a separate window, you can focus viewer attention on the contents in your Player.
  • Creating a streaming media banner for a Web page.
    A streaming banner is a banner that contains an embedded Windows Media Player ActiveX control. When a user opens a Web page containing a streaming banner, the embedded Player opens and streams video that has been produced to fit within the design of the banner.

By providing these Internet advertising solutions with Microsoft's Windows Media technologies, as well as the powerful, robust, and controlled development environment, the developer can create a solution that encompasses all site branding and user controls to both developer and customer satisfaction. This article assumes that you are familiar with Windows Media metafiles, creating Windows Media-based content, and Web page scripting. It is recommended that you download the Microsoft Windows Media Player 10 SDK (http://msdn.microsoft.com/library/default.asp?url=/library/en-us/wmplay10/mmp_sdk/windowsmediaplayer10sdk.asp), which contains complete information on how to create metafiles and embed the Player in a Web page.

Back to the top of this pageBack to the top


Getting Ready

Before implementing the steps to embed the Windows Media® Player control in Web pages, you must have access to a Web server from which to host your Web pages and to your Web users.

Microsoft Windows Server™ 2003 is a multipurpose operating system capable of handling a diverse set of server roles. For example, if you already have installed Windows Server 2003, you have access to Internet Information Services (IIS) 6.0, a powerful Web server that provides a highly reliable, manageable, and scalable Web application infrastructure for all versions of Windows Server 2003. IIS helps organizations increase Web site and application availability while lowering system administration costs.

Back to the top of this pageBack to the top


Scripting for Browser Compatibility

Both Internet Explorer and Netscape Navigator support embedding the Windows Media® Player ActiveX® control. 

If you are uncertain of the browsers your viewers use when they visit your site, you would probably want to add some code to your Web page that detects the browser being used and then chooses the appropriate embedding technique. Even if you add extra code, the browser executes the code that Internet Explorer understands and ignores the code intended for Netscape browsers. The inverse is true as well.

Users of either browser must install Windows Media Player before viewing pages that embed the control.

Detecting Browser Versions


For optimal viewing of your Web site, it's important to include browser version detection in your code. Because the code you write for the ActiveX control depends on which version of the browser your users have installed,

The Windows Media Player 10 Software Development Kit (SDK) includes an updated browser-detection sample. For more information regarding the Windows Media Player 10 browser-detection sample, see the Windows Media Player 10 SDK (http://msdn.microsoft.com/library/default.asp?url=/library/en-us/wmplay10/mmp_sdk/windowsmediaplayer10sdk.asp).

Netscape Navigator also includes browser detection samples. For more information regarding Netscape Navigator browser detection, see the Netscape Web site (http://devedge.netscape.com/viewsource/2003/windows-media-in-netscape/).

Using the Player Control with Internet Explorer

To embed the Player control in a Web page for use with Internet Explorer, use the OBJECT element with the ID and CLASSID attributes. You can use the height and width attributes to specify the dimensions of the Player. The following code sample shows how to embed the Player in a Web page:

<OBJECT ID="Player" HEIGHT="200" WIDTH="200" 
CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
</OBJECT>
The PARAM element, which defines specific startup conditions for the control, is embedded within the OBJECT element, and has two attributes: NAME and VALUE. Both attributes must be set. The following code sample shows how the PARAM element is used:

{
<OBJECT ID="WMPEmbed" height="240" width="320"
        CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">');
   <PARAM name="autoStart" value="FALSE"/>');
   <PARAM name="UIMode" value="full"/>
   <PARAM name="URL" value="mms://www.proseware.com/content/laure.wmv"/>
}
Windows Media Player supports a set of predefined PARAM elements. For a complete listing of the predefined PARAM elements available to the Windows Media Player control, see the Windows Media Player 10 SDK (http://msdn.microsoft.com/library/default.asp?url=/library/en-us/wmplay10/mmp_sdk/windowsmediaplayer10sdk.asp).

Using the Player Control with Netscape Navigator

The Netscape 7.1 Web browser provides support for Windows Media Player ActiveX controls by using the Gecko ActiveX Component. This means you can embed the Windows Media Player control in your Web pages for Netscape 7.1 by using the same syntax you would use for Microsoft Internet Explorer. Netscape 7.1 also supports scripting the control and event handling in a similar fashion.

If you want to use the Windows Media Player control in Netscape, it is recommended that you use Netscape 7.1. Because the previous versions of Netscape browsers did not support any ActiveX controls detecting which versions of Netscape support the Windows Media ActiveX control is an important first step towards building multimedia experiences

For more information about using the Windows Media Player control with Netscape 7.1, see the Netscape Web site (http://devedge.netscape.com/viewsource/2003/windows-media-in-netscape/).

Back to the top of this pageBack to the top


Adding Streaming Media to a Web Page

Streaming media offers more compelling viewer responses than traditional text information. By adding streaming media to your Web page, you get more viewer attention. More attention means your viewers may become customers for your advertisers.

The next section describes how to add streaming media to your Web page.

Implementing Streaming Media to a Web Page

To add streaming media to a Web page, you must embed the Windows Media Player ActiveX control in your Web page.

You can embed the Windows Media Player ActiveX control in a Web page by:
  1. Creating the Web page.
  2. Adding the OBJECT tag.
  3. Adding a user interface, in this case, two buttons.
  4. Adding 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 so the default user interface of Windows Media Player is visible. If you want to customize the user interface, then set the height and width attributes to 0 (zero). You can also set the Player.uiMode property to "invisible" if you want to hide the control, but still reserve space for it on the page. The following code is recommended when you want to create 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
  • CLASSID

The ID attribute identifies the ActiveX control. Through this value, the Player object is referred to by other portions of the code. 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 name it as you please. However, it is advisable to select a name that is unique to the Web page.

The CLASSID attribute is a very large hexadecimal number that is unique to the control. Only the Windows Media Player ActiveX control has this number. 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 appears on the button, and the onClick attribute identifies which part of your scripting code is 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 better to enclose your script in HTML comment tags so that browsers that do not support scripting cannot 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 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 = "rtsp://www.proseware.com/content/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 starts playing immediately.

The ShutMeDown code calls the stop method of the Control object. Note that the Control 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 = "rtsp://www.proseware.com/content/laure.wma";
}

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

-->
</SCRIPT>
</BODY>
</HTML>
Note    You must provide a valid URL to a valid file name for the URL property. In this case, the assumption is that the file laure.wma is in the same directory as the HTML file.
Back to the top of this pageBack to the top


Creating a Custom Interface Streaming Media Player

You can create a Windows Media® Player with a custom interface that streams media, built upon the Windows Media Player object model. With this type of interface, you can control user interaction and controls, and, of course, the appearance of the Player.

You can also programmatically deliver metadata about your streaming media to your listeners. For example, you might include information about the artist, name, and duration of the music you are streaming to your listeners.

The remainder of this section focuses on creating a Player in a separate Web page. The Player appears with fixed dimensions, a hidden taskbar and menu bar, and streams media. The Player also includes site branding, displays media metadata, and contains ads.

Implementing a Custom Interface Streaming Media Player

To create a custom interface Windows Media Player, building on the skills and tasks achieved in Adding Streaming Media to a Web Page, you must complete the following steps:
  1. Creating the playlist
  2. Embedding the Windows Media Player
  3. Creating the Web page that launches the new window

Creating the Playlist

The playlist points Windows Media Player to your content. A playlist is a text file with an .asx file name extension, which is created in XML. These files are used to transfer the request for content from the browser to Windows Media Player. Because browsers communicate using the HTTP protocol, they do not recognize popular streaming protocols, and attempt to download rather than play the referenced content. Once the playlist sends the content request to Windows Media Player, the Player communicates directly with the Windows Media server to determine the appropriate protocol for delivering the stream.

The following sample plays the content that you are going to stream to the Windows Media Player:

<ASX version = "3.0">
<TITLE>Popup Player Demo</TITLE>
  
    <ENTRY>
        <REF HREF = "rtsp://proseware.com/Dance.wma" />
        <PARAM NAME = "BannURL" VALUE = "http://proseware.com/banner1.jpg"/>
        <PARAM NAME = "AdURL" VALUE = "rtsp://microsoft.com"/>
    </ENTRY> 

    <ENTRY>
        <REF HREF = "rtsp://proseware.com/Hearts.wma" />
        <PARAM NAME = "BannURL" VALUE = "http://proseware.com/banner2.jpg"/>
        <PARAM NAME = "AdURL" VALUE = "rtsp://microsoft.com/windowsmedia"/>
    </ENTRY>

    <ENTRY>
        <REF HREF = "rtsp://proseware.com/Working.wma" />
        <PARAM NAME = "BannURL" VALUE = "http://proseware.com/banner3.jpg"/>
        <PARAM NAME = "AdURL" VALUE = "rtsp://msdn.microsoft.com/library"/>
    </ENTRY>

</ASX>
The ENTRY element specifies the path for the media clips; you can include as many ENTRY elements as you need. In the previous example, each ENTRY element includes the child elements REF and PARAM. The REF element refers to the location of the streamed media, and the PARAM element is a custom attribute.

Windows Media Player supports a set of predefined values for the PARAM element The PARAM element must specify a NAME and VALUE pair. You can also use the PARAM element to create your own attributes, such as BannURL and AdURL. In this case, BannURL specifies the banner image displayed, and AdURL specifies the URL of the window that opens when BannURL is selected. You can later pass these values to the GetItemInfo method to retrieve metadata information you have specified in the playlist, and pass the values to the Player for display to the user.

Embedding Windows Media Player

The next step is to create the Web page where you can embed the Player control in the newly created window, and direct the Player how to play the content you are streaming to the Player.

Within the BODY, as described earlier in Creating the Web Page, you must add an OBJECT, and include the required attributes as well as the URL of the playlist metafile from which the Player receives streamed media information.

The following code includes the necessary OBJECT tag and attributes, and the PARAM tag:

<OBJECT ID="Player"
  CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
  <PARAM NAME = "URL" VALUE = "http://proseware.com/popup.asx">
</OBJECT>
In this code example, the value of the URL is passed to the Player object. This value is a Windows Media metafile that opens the playlist. A full discussion of the playlist follows in Creating the Playlist.

Within the BODY, you must allocate space on the Web page for the metadata and banner to display, by using any technique you choose.

The following code creates a DIV element to display the metadata information, and an IMG element to show the banner:

<DIV id = divMetadata>
Metadata displays here
</DIV>

<BR><BR>

<!-- This is where the metadata info displays. -->
<IMG id = "imgBanner" style = "cursor:hand" onClick = "BannerClick()">
The IMG element includes a style attribute that lets the reader know that the image is a link. It informs the reader of this by the cursor changing to a hand icon.

Next, you must write three functions with the following purposes:
  • Retrieve and display metadata about the streamed content.
  • Retrieve information about which banner to display.
  • Open a Web page in a new window after the user clicks on a banner.

The following code retrieves and displays metadata about the streamed content. It uses the Media.getItemInfo method of the Windows Media Player object model to retrieve information about the currently playing digital media content, and then displays the information in the DIV named divMetadata:

function ShowMetadata()
{
    var Media = Player.currentMedia;
    // Test whether we have a valid Media object.
    if(!Media)
    {
        divMetadata.innerHTML = "No current media.";
        return;
    }

    // Retrieve the metadata we want to display.
    var Title = Media.getItemInfo("Title");
    var Artist = Media.getItemInfo("WM/AlbumArtist");
    var AlbumTitle = Media.getItemInfo("WM/AlbumTitle");
    var Duration = Media.durationString;

    // Test the duration string value.
    // Streaming media always returns zero.
    if(Duration == "00:00")
    {
       Duration = "No duration available";
    }

    // Display the metadata in the DIV element.
    divMetadata.innerHTML = "Title: " + Title + "<BR>";
    divMetadata.innerHTML += "Artist: " + Artist + "<BR>";
    divMetadata.innerHTML += "Album: " + AlbumTitle + "<BR>";
    divMetadata.innerHTML += "Duration: " + Duration + "<BR>";
}
The preceding example code first retrieves a Media object that represents the currently playing digital media item. If a valid Media object is retrieved, the code then uses getItemInfo to retrieve the title, album artist, and album title from the digital media file or stream. If the TITLE element is specified in a playlist metafile, the title is retrieved from that element. The file duration is retrieved using the Media.durationString property. Finally, the code specifies a value for the innerHTML property of the DIV element to display information.

For a complete description of the Player and Media objects and the properties and methods associated with them, see the Windows Media Player 10 SDK

The following code is the second function in the SCRIPT block, which retrieves the information to display the banner:

function ShowAd()
{
    var Media = Player.currentMedia;
    // Test whether a valid Media objec
    // was retrieved.
    if(!Media)
    {
        // No valid media. Cannot update the banner.
        return;
    }

    // Retrieve the banner URL from the 
    // custom PARAM element in the playlist.
    var BannerURL = Media.getItemInfo("BannURL");

    // Set the banner URL for the IMG element.
    imgBanner.src = BannerURL;
}
The following code is the third function in the SCRIPT block. This function directs the Player to open a new window when a user clicks on the banner image. The new window must be opened according to the dimensions and behaviors specified, and to the URL specified in the playlist:

function BannerClick()
{
    var Media = Player.currentMedia;
    // Test whether a valid Media objec
    // was retrieved.
    if(!Media)
    {
        // No valid Media object, Do nothing.
        return;
    }

    // Retrieve the URL from the custom PARAM
    // element in the ASX playlist.
    var AdURL = Media.getItemInfo("AdURL");

    // Open a separate browser window to display the 
    // Web page.
    // The following code block contains line breaks for display purposes.
    // The scripting language does not support line breaks.
    // In actual implementation, you must remove the line breaks.
    window.open(AdURL,"", "height=300, width=500, left=300,
    menubar=no, scrollbars = yes, location=no,
    titlebar=no, toolbar=no, status=no");
}
After you have written the functions, you need to write the code that calls them at the appropriate time. To do this, you must write an event handler for the Player.OpenStateChange event. This is the event that occurs each time Windows Media Player performs an operation to open a digital media file or stream.

The following example code shows an event handler using an HTML SCRIPT block. The JScript code in the script block handles only the media open state. Each time the Windows Media Player control opens a new digital media file or stream, the code calls the ShowMetadata() and ShowAd() functions you wrote to update the metadata information and the banner image.

<SCRIPT Language = "JScript" FOR = "Player"
 EVENT = "OpenStateChange(NewState)">

    switch(NewState)
    {
        // Media object open.
        case 13:
            ShowMetadata();
            ShowAd();
            break;
        default:
            break;
    }
The following code example shows the complete code necessary to embed the Windows Media Player, with the desired behaviors, in a Web page:

<HTML>
<HEAD>
</HEAD>
<BODY>
<OBJECT ID="Player"
  CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
  <PARAM NAME = "URL" VALUE = "http://proseware.com/popup.asx">
</OBJECT>

<BR><BR>

<!-- This is where the metadata info displays. -->
<IMG id = "imgBanner" style = "cursor:hand" onClick = "BannerClick()">
Metadata displays here
</DIV>

<BR><BR>

<!-- This is where the banners display. They are JPEGs. -->
<IMG id = "imgBanner" style = "cursor:hand" onClick = "BannerClick()">

<SCRIPT>
<!--

// Called when the media opens to retrieve and display metadata.
function ShowMetadata()
{
    var Media = Player.currentMedia;
    // Test whether we have a valid Media object.
    if(!Media)
    {
        divMetadata.innerHTML = "No current media.";
        return;
    }

    // Retrieve the metadata we want to display.
    var Title = Media.getItemInfo("Title");
    var Artist = Media.getItemInfo("WM/AlbumArtist");
    var AlbumTitle = Media.getItemInfo("WM/AlbumTitle");
    var Duration = Media.durationString;

    // Test the duration string value.
    // Streaming media always returns zero.
    if(Duration == "00:00")
    {
       Duration = "No duration available";
    }

    // Display the metadata in the DIV element.
    divMetadata.innerHTML = "Title: " + Title + "<BR>";
    divMetadata.innerHTML += "Artist: " + Artist + "<BR>";
    divMetadata.innerHTML += "Album: " + AlbumTitle + "<BR>";
    divMetadata.innerHTML += "Duration: " + Duration + "<BR>";
}

// Called when the media opens to show the banner image.
function ShowAd()
{
    var Media = Player.currentMedia;
    // Test whether a valid Media objec
    // was retrieved.
    if(!Media)
    {
        // No valid media. Cannot update the banner.
        return;
    }

    // Retrieve the banner URL from the 
    // custom PARAM element in the playlist.
    var BannerURL = Media.getItemInfo("BannURL");

    // Set the banner URL for the IMG element.
    imgBanner.src = BannerURL;
}

// Opens the URL specified in the ASX playlist in a
// separate window when the user clicks the banner ad.
function BannerClick()
{
    var Media = Player.currentMedia;
    // Test whether a valid Media objec
    // was retrieved.
    if(!Media)
    {
        // No valid Media object. Do nothing.
        return;
    }

    // Retrieve the URL from the custom PARAM
    // element in the ASX playlist.
    var AdURL = Media.getItemInfo("AdURL");

    // Open a separate browser window to display the 
    // Web page.
    // The following code block contains line breaks for display purposes.
    // The scripting language does not support line breaks.
    // In actual implementation, you must remove the line breaks.
    window.open(AdURL,"", "height=300, width=500, left=300,
    menubar=no, scrollbars = yes, location=no,
    titlebar=no, toolbar=no, status=no");
}

-->
</SCRIPT>

<!-- Event handler for OpenStateChange event. -->
<SCRIPT Language = "JScript" FOR = "Player"
 EVENT = "OpenStateChange(NewState)">

    switch(NewState)
    {
        // Media open.
        case 13:
            ShowMetadata();
            ShowAd();
            break;
        default:
            break;
    }

</SCRIPT>

</BODY>
</HTML>
After you have successfully embedded your Player control in the Web page and provided the code to play the files in the appropriate order, save the files to the same directory on your Web server that you saved the playlist file.

Creating the Web Page that Launches the New Window

The first step is to create a valid HTML Web page that launches the new window. The new window is launched by using a script. The following code example uses JavaScript as the scripting language. 

Place the A tag anywhere within the BODY of your HTML file. Within the A tag, you also must include some text or other indicator on the Web page itself informing the user that a link is available:

<A HREF="javascript:PopPlayer()">
Click here to pop up Windows Media Player
</A>
The A tag links to a function in the script called PopPlayer(). This function takes no arguments.

The PopPlayer() function, in turn, calls the open method of the window object. This method, which takes up to four arguments, determines the dimensions and behaviors of the new window. The following code example shows the PopPlayer() calling the open method:

function PopPlayer()
{
    // The following code block contains line breaks for display purposes.
    //The scripting language does not support line breaks.
    //In actual implementation, you must remove the line breaks.
    window.open("PopupPlayer.htm", "", "height=500, width=300,
    left=0, channelmode=no, directories=no, location=no,
    menubar=no, resizable=no, status=no, scrollbars=no,
       toolbar=no",false);
}
When both pages are in the same directory, the open method opens a new window and loads the document specified by the URL argument, PopupPlayer.htm.

The following code shows a complete example of the code necessary to launch the new window:

<HTML>
<BODY>
Popup Windows Media Player sample
<BR><BR>
<A HREF="javascript:PopPlayer()">
Click here to pop up Windows Media Player
</A>
<SCRIPT>
// The following code block contains line breaks for display purposes.
// The scripting language does not support line breaks.
// In actual implementation, you must remove the line breaks.
function PopPlayer()
{
    window.open("PopupPlayer.htm", "", "height=500, width=300, left=0,
    channelmode=no, directories=no, location=no, menubar=no,
    resizable=no, status=no, scrollbars=no, toolbar=no", false);
}

</SCRIPT>
<BODY>
</HTML> 
After you have successfully created the Web page within which the Windows Media Player launches, save the files to the same directory on your Web server that you saved the playlist file and the embedded Web page.

For a full description of the open method, see the Microsoft Developers Network Library Web page (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/open_0.asp).

Back to the top of this pageBack to the top


Creating a Streaming Media Banner for a Web Page

The banner ad is the most popular advertising device used on the Internet today. You've seen these ads, typically at the top of Web pages. You can visually enhance your viewer even more by adding streaming video to your banner.

The streaming banner is a Web page that can be contained in a frame of a Web page, or created as a freestanding, borderless browser window. The banner page can contain any element that a standard Web page can contain, including text, background color, images, and ActiveX® controls. Streaming video is added using the Windows Media® Player control. The embedded Player control is configured to display only the video frame at the specified size, and to play the video stream as soon as the control opens.

The video should be shot and produced with the specified frame size in mind. When the video is converted to a Windows Media file, the frame is sized and clipped to the exact dimensions specified in the banner design.

Implementing Streaming Banners

To create a streaming banner, produce the video and then design the banner around the embedded Windows Media Player control. Save the banner on the Web server you use to serve ads and the Windows Media-based content on your Windows Media server.

Producing the Video

When shooting or selecting video to use in the banner, you need to know what the final video frame size will be so that you can estimate the height-to-width ratio. For example, if your banner is 468 x 60 pixels, and the area that holds the embedded Player is 320 x 32 pixels, your height-to-width ratio is 1:10.

The video that you use for the banner will most likely be standard broadcast video, which has a frame ratio of 3:4. To use standard video for streaming banners, select a 1:10 portion of the full video frame, and then use the custom frame size and clipping settings in Windows Media Encoder to create the final frame. The following figure illustrates a standard video frame and the 1:10 section that has been marked off for the banner.

Figure 1. Video frame showing marks for 1:10 section

Figure 1. Video frame showing marks for 1:10 section

As you shoot, select, and edit scenes to stream in your banners, refer to this ratio to make sure that the portion of the complete video frame that you want to display in the banner is in the correct ratio. For example, you can create a border with masking tape on your video monitor that approximates the banner ratio.

Save your final full-frame video as in an uncompressed format. Your file may or may not include an audio track. If the file includes an audio track and you do not want to include audio in your banner, you can save the media as a video-only .asf file.

Open Windows Media Encoder and configure it to encode a Windows Media file from your source file. Refer to Windows Media Encoder Help for detailed information about encoding files and using encoding profiles.

Use the following procedures to change the frame size by using Windows Media Encoder:

  1. In Windows Media Encoder, click Properties, and then click the Video Size tab.
  2. In the Method list, under Crop, click Custom.
  3. Adjust the Top, Bottom, Left, and Right boxes to clip or crop out parts of the original frame. For example, setting Top to 100 crops the top 100 pixels of the frame. Some experimentation will be required to get the right settings and maintain the ratio of 1:10.
  4. If your original file is 320 x 240, then you must clip a total of 208 pixels from the top and bottom of the file to obtain a height of 32 pixels. For example, you could use a Bottom setting of 100 and a Top setting of 108. Keep in mind that the minimum height and width of any file is 32 pixels. To determine the height of a video after it has been clipped, subtract the top and bottom setting values from the original video height.

After encoding the banner video, copy the file to the Windows Media server. Next, specify the URL property of the embedded Windows Media Player control. The Windows Media Player control then accesses the file and streams the video in the banner.

Designing the Banner

The streaming banner is a Web page displayed either in a frame or as a freestanding borderless browser window. To add streaming video to the page, you need to embed a Windows Media Player control. The following sample banner page script contains text, the Player control, and an image:

<html>
<head>
</head>
<body bgcolor="#000000">
<p>
<font color="#FFFF00" face="Century Gothic" size="5">
Live Quotes</font>
<object classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6"
id="Player" width="440" height="40">
  <PARAM NAME="autoStart" VALUE="true">
  <PARAM NAME="URL" VALUE="mms://WindowsMediaServer/Quotes">
  <PARAM NAME="uiMode" VALUE="none">
</object>
<img border="0" src="logo2.gif" width="54" height="44">
</font>
</p>
</body>
</html>
In the previous sample, the mark-up language embeds the Windows Media Player ActiveX control, as specified by the CLASSID attribute, and streams the broadcast video stream indicated by the URL parameter. You can also expand the script to ensure the video streams in browsers that do not support ActiveX controls. The following parameter settings are necessary for the Player control to display properly in the banner:
  • AutoStart=True. This property specifies or retrieves a value indicating whether the current media item begins playing automatically. A value of True begins playing the media item immediately.
  • URL=mms://WindowsMediaServer/Quotes. This property specifies or retrieves the name of the media item to play. The value is a String which is passed to the Player control.
  • uiMode=none. This property specifies or retrieves a value indicating which controls are shown in the user interface. A value of none specifies that the Windows Media Player is embedded without controls, and with only the video or visualization window displayed.

For complete information on Player control properties and available methods, see the Windows Media Player 10 SDK (http://msdn.microsoft.com/library/default.asp?url=/library/en-us/wmplay10/mmp_sdk/windowsmediaplayer10sdk.asp).

Back to the top of this pageBack to the top


For More Information

  • For general information about Windows Media® technologies, see the Windows Media Web page (http://www.microsoft.com/windows/windowsmedia).
  • For general information about streaming media and the role that the Windows Media server plays in that technology, see Web Server vs. Streaming Server Web page (/windows/windowsmedia/compare/webservvstreamserv.aspx).
  • To learn more about Windows Media Player 9 Series, see Windows Media Player 9 Series Help. You can download Windows Media Player 9 Series from the Windows Media Download Center (/windows/windowsmedia/download/).
  • To learn more about the Windows Media Player, see the Windows Media Player 10 SDK (http://msdn.microsoft.com/library/default.asp?url=/library/en-us/wmplay10/mmp_sdk/windowsmediaplayer10sdk.asp).
  • To learn more about metafiles, see the Windows Media metafile reference section on the MSDN Web site (http://msdn.microsoft.com/library/default.asp?url=/library/en-us/wmplay/mmp_sdk/asx_elementsintro.asp) or download the Windows Media Player 9 Series SDK, which contains the metafile reference.
  • To learn more about other advertising solutions using Windows Media technologies, see the Hosting and Infrastructure articles (/windows/windowsmedia/knowledgecenter/
    technicalarticles.aspx#hostingandinfrastructure).
  • To learn more about streaming media solutions, see the Windows Media Resource Kit by Microsoft Press.


Back to the top of this pageBack to the top



© 2015 Microsoft Corporation. All rights reserved. Contact Us |Terms of Use |Trademarks |Privacy & Cookies
Microsoft