Advertising Solutions: Windows Media Player Interface
Feedback
E-mail us with your comments and feedback about this article.
Abstract
Describes how to create advertising solutions that make use of the Now Playing pane of the full-mode Microsoft Windows Media Player 9 Series user interface. By embedding advertising in the Now Playing pane, users can take advantage of features available in the full-mode Player.
A number of Microsoft® Windows Media® Player properties and methods, and Windows Media metafile elements and attributes, can be used to create compelling interactive ads that display directly on the Windows Media Player user interface. Of course, the Player is great for playing audio and video files, and broadcast streams that contain commercials. However, by using Windows Media metafiles, you can add the ability to display interactive ad banners and Web pages.
Within Web pages you can embed Microsoft ActiveX® controls and scripting that pulls information and commands from the metafile or the digital media that is playing. For example, you can embed a Web page in the Player that includes images or text that change in synchronization with an audio stream. You can also embed a Macromedia Shockwave Flash movie in a Web page or play the movie in a playlist.
This article describes four ways to create compelling ad content for Windows Media Player. You can adapt these methods, and use the metafile elements and attributes to create any number of ad solutions using the Player interface. The article also provides sample script to help you understand the concepts quickly, and start creating content.
An ad banner is a small image file that displays at the bottom of the Now Playing pane in Windows Media Player. The banner is implemented with scripting in a Windows Media metafile. In addition to displaying an image file, an ad banner can include a hyperlink that leads to a Web page that provides more information about the ad.
Figure 1. Ad banner displayed in the Player
A Windows Media metafile is a script file that contains commands and other information that are interpreted by the Player. Metafiles were initially designed for linking streaming media content from a Web page. Direct links on a page often do not work, because many browsers are not capable of handling streaming media content. Instead, the Web page can link to the metafile that contains the direct link in scripting, which is interpreted by the Player.
Beyond its initial use as a redirector file, the metafile provides producers with a number of interesting ways to create or control the user playback experience. A metafile can contain text information that is displayed on the Player, multiple files and streams that are played sequentially in a playlist, ad banners, and several other very useful features.
To implement ad banners
Create the art. Use a graphics program to create an image file in the BMP, GIF (static or animated), or JPG file format. The banner can be as large as 32 pixels high by 194 pixels wide.
Host the image file on a Web server. You could locate all Windows Media Player ad banners in a single folder, such as one named WMPBanners.
Create the metafile. Using a text editor, such as Microsoft Notepad, write the script that identifies the media content you want to play and the banner attributes. Then save the script with one of the following file name extensions: .wvx (metafile contains links to video content), .wma (contains links to audio content), or .asx (contains a mix of content types).
Host the metafile on a Web server. You could locate all metafiles in the same folder, such as one named ASX.
Add the metafile link to the Web pages. For example, the link could be http://WebServer/ASX/Programs.asx.
Metafile scripting is based on Extensible Markup Language (XML) syntax and made up of elements and their associated tags and attributes. Each element in the script defines a particular setting or behavior in Windows Media Player.
For example, when the following script is opened in Windows Media Player, the first entry, Program1.wmv, plays with the BANNER Ad01-anim.gif:
<ABSTRACT>Click here to go to our Web site.</ABSTRACT>
<MOREINFO HREF="http://sample.microsoft.com" />
</BANNER>
</Entry>
<Entry>
<TITLE>Video #2</TITLE>
<Ref HREF = "rtsp://WMserver/Program2.wmv"/>
</Entry>
</ASX>
The banner contains ABSTRACT text that displays when the user moves the mouse pointer over the banner. When the user clicks the banner, the Web page identified in the MOREINFO element opens in the default browser.
This metafile is a playlist because it contains more than one Entry element. After Program1.wmv finishes, the second element, Program2.wmv, plays. Notice that the banner in the example is associated with the first entry only. When the second entry starts, the banner closes. If you want the banner to run the length of a playlist, you can associate it with the ASX element, for example:
<ABSTRACT>Click here to go to our Web site.</ABSTRACT>
<MOREINFO HREF="http://sample.microsoft.com" />
</BANNER>
<Entry>
<TITLE>Video #1</TITLE>
<Ref HREF = "mms://WMserver/Program1.wmv"/>
</Entry>
<Entry>
<TITLE>Video #2</TITLE>
<Ref HREF = "rtsp://WMserver/Program2.wmv"/>
</Entry>
</ASX>
You can further define the frame or window in which the Web page will appear by adding a TARGET attribute to the MOREINFO element.
<MOREINFO HREF="URL" TARGET="Frame" />
This attribute can be very useful, especially when Windows Media Player is embedded in a Web page. If a target frame is not specified and a user clicks the banner, the Web page containing the Player will be replaced by the MOREINFO page, thereby unloading the Player control and stopping the stream. The TARGET attribute enables you to specify a separate frame to display the MOREINFO page and keep the embedded Player open in another frame. If the metafile is opened in the standalone Windows Media Player, the TARGET attribute is ignored, and the site specified by the URL opens in a new browser window.
With the HTMLView parameter, you can display a Web page in the Now Playing pane of Windows Media Player. Figure 2 shows an example of an embedded Web page.
Figure 2. Web page embedded in the Now Playing pane of the Player.
With the ability to embed a Web page, you can control the style of the ads and how they are displayed, not to mention the user's entire visual experience. The example mixes a banner ad with information about music being streamed from a radio station. The following metafile script embeds the page:
<ASX version = "3.0" >
<PARAM Name = "HTMLView" VALUE = "http://WebServer/ClassicRock.htm" />
<Entry>
<Abstract>Don Funk's "History of the Funk" was released in 1966 as a
single, but was never part of an album until "Best of Don Funk" in
1976.</Abstract>
<ref href = "mms://WMServer/ClassicRock" />
</Entry>
</ASX>
HTMLView is the parameter that does the work. There is one entry that points to a broadcast publishing point, ClassicRock, that hosts a live, radio station stream. The Abstract text in the Entry element is used to populate a text area in the embedded page.
The page contains two image files arranged in a DIV. The text area, defined by a <p> tag and style attributes, displays the text extracted from the metafile. The following example shows the HTML script used to display the page:
Text style. The <style> tag defines the text area and attributes of the text.
Embedded Windows Media Player. The <OBJECT> tag embeds the Windows Media Player ActiveX control - a Player embedded in a Web page embedded in the Player. This embedded Player is invisible, and is used only for extracting the Abstract text from the metafile. You would also use an embedded Player control if you wanted to display a video frame with your page in the Now Playing pane.
PlayStateChange event script. The Player control raises an event when the Player state changes between play, pause, and stop. A play state of 3 is raised when the Player changes to a new entry in the metafile. In the script, this event calls the ShowInfo function.
ShowInfo function. This function extracts the Abstract text from the metafile and sends it to the text area.
Text and DIV. Text1 identifies the text area; the DIV positions tables that hold the image files.
PlayStateChange and ShowInfo could also be used to extract other text information from the metafile, such as Title and Author, as well as text, values or commands contained in script commands embedded in the steam. With an embedded Player in the page, any event or property of the Player or stream can be used for scripting. For example, you could modify these functions to pull timing information from a stream to change images in synchronization with the content. You could also add buttons or other areas to a page that controlled Player properties, such as changing playback position.
In this example, a teaser spot for Classic Radio plays in a Flash movie for 30 seconds. Then the HTMLView metafile file from the previous example plays the live radio station with embedded Web page. Notice that because Flash movies can be created that have no set duration, a DURATION value must be assigned if the file is part of a playlist. In addition to Flash files, JPEG image files can be included in a playlist.
When referencing a Flash movie directly in a playlist, the movie plays as a separate entry. In this example, a Flash movie is embedded in a Web page using HTMLView, so that it plays in parallel with a playlist. First a Flash movie is created (Figure 3) that looks and functions the same as ClassicRock.htm in the previous embedded Web page example.
Figure 3. Flash movie created to be embedded in the Player.
In the Flash authoring program, a multi-line, dynamic text box with the Variable name AbText is added to the Flash movie, and the movie is published with the name ClassicRock.swf. The HTMLView parameter in the metafile in the previous example is modified to point to a Web page that has the following script:
<SCRIPT LANGUAGE = "JScript" FOR = "WMP" EVENT = "PlayStateChange(NewState);">
if(3 == NewState)
{
ShowInfo();
}
</SCRIPT>
<SCRIPT>
// Displays title and description in the DIV elements.
function ShowInfo()
{
if( WMP.currentMedia )
{
Flash.SetVariable("AbText",
WMP.currentMedia.getItemInfo('Abstract'));
}
}
</SCRIPT>
</BODY>
</HTML>
The page, which displays only the Flash movie, contains the following sections:
Embedded Windows Media Player control. The invisible embedded Player is used to extract Abstract text from the metafile.
Embedded Flash control. The Flash movie (HTMLView.swf) is played with the control.
PlayStateChange event script. As with the previous example, this script calls the ShowInfo function whenever an entry in the playlist begins playing.
ShowInfo function. This function calls the Flash SetVariable and Player getItemInfo methods that get the Abstract text from the metafile and pass it to the AbText textbox in the Flash movie.
The ability to embed the Flash control in a Web page embedded in the Player opens up a great number of possible ad solutions. Not only can you play and control playback of Flash movies and audio and video content, you can easily add scripting that passes information and commands between the Player and Flash. With Flash and Windows Media metafile scripting, you can, for example, synchronize playback of a Flash movie with script commands or markers contained in a Windows Media audio stream.
The following script snippet shows how to control the playback position of a Flash movie with script commands contained in a Windows Media stream:
<SCRIPT LANGUAGE = "JScript" FOR = "WMP" EVENT = "ScriptCommand(scType, scParam);">
if(scType == "GOTO")
{
Flash.GotoFrame(scParam);
Flash.Play();
}
</SCRIPT>
Script commands are added to a Windows Media file or stream using an encoding tool such as Microsoft Windows Media Encoder 9 Series. A script command contains two text strings (scType and scParam) and a time value. When the encoded media is played back, a ScriptCommand event is raised at the time specified, and the two strings are passed as arguments to any script in a Web page or application that is written to handle the event.
In the example, when the scType string is equal to GOTO, the scParam string, which would be a number value, is sent to the Flash GoToFrame method. When the media is played, for example, a script command containing the strings GOTO and 35, would cause the Flash movie to go to frame 35, and the Flash.Play() method would cause it to play from that point. Using this system, you could create a Flash animation and synchronize it to a Windows Media streaming audio track.
Back to the top
