Customizing Windows Media Player

Windows Media Player enables you to enhance the presentation of your digital media with a number of features and methods. In this topic, we will look at three of them: HTMLView, skins, and borders. Then we will see how the Contoso staff creates an HTMLView Web page and border that the Contoso Movies Online site will use to wrap around special trailers, features, and downloads.

The following list summarizes the features Contoso wants to include in its enhanced presentations:

• Branding. The graphical treatment must include the company name, logo, colors, and other thematic elements. For end users, this will make a connection between the content and Contoso. Name recognition is very important for this young company.

• Widescreen. To further promote the movie connection, the site will present all digital media in a widescreen aspect ratio. All digital media will be cropped or stretched (if necessary) to accommodate sizes of 320 x 176, 360 x 240, or 720 x 480.

• Rent now and Details buttons. As end users view content, they can click buttons to display either information about the movie or the page that starts the rental process. Again, it is important that Contoso maintains the connection between the content in the Player and the Web site.

• Extra movie info. Description text from each clip in a playlist will be displayed, providing the end user with additional information. The text will help build excitement for the movie and promote rental.

In the future, Contoso can expand on the information it provides to end users for each clip in a playlist. They can also add graphics, such as production stills, and can create custom borders for each exclusive program.

Customizing the Player with HTMLView

The simplest way to create a custom look in the Player is with the HTMLView parameter. All you have to do is add the HTMLView parameter to a Windows Media metafile with an .asx extension, and you can display a Web page in the Now Playing pane of the Player. If you want to display video, you add an embedded Player control to the page. You can also add elements like controls, links, frames, and tables. Figure 10.5 shows a sample Web page inserted using HTMLView.

Figure 10.5: Using HTMLView to display custom Web content in the Player.

When an end user clicks a link on the Contoso Web site for a special trailer or feature, a metafile is downloaded that contains a playlist of the digital media and an HTMLView element that embeds the Web page, such as the following:

<ASX version = "3.0" >     <PARAM Name = "HTMLVIEW" Value = "HTMLView.htm"/>     <Entry>         <TITLE>Video #1</TITLE>         <ABSTRACT>Text below video 1</ABSTRACT>         <Ref HREF = "video1.wmv"/>     </Entry>     <Entry>         <TITLE>Video #2</TITLE>         <ABSTRACT>Text below video 2</ABSTRACT>         <Ref HREF = "video2.wmv"/>     </Entry> </ASX>

The Player downloads HTMLView.htm and displays it in the Now Playing pane, and then begins playing the playlist. An example HTMLView.htm file is included on the companion CD. You can open the file in a text editor to see how it was constructed.

Basic HTML scripting is used to create and position the elements on the page. The title above the video frame comes from the TITLE element in the metafile, and is passed to the browser that is built in to the Player using the Player property currentMedia.name.

Title.innerHTML = Player.currentMedia.name;

The text below the video frame comes from the ABSTRACT element in the metafile, and is passed to the built-in browser using the getItemInfo Player method.

Description.innerHTML = Player.currentMedia.getItemInfo(‘Abstract’);

Title.innerHTML and Description.innerHTML refer to the two DIV elements in the Web page that display the text. Finally, the video frame is embedded in the built-in browser using scripting for embedding the Player in a Web page.

<OBJECT  height = 176 width = 320  classid = "CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">      <PARAM name = "AutoStart"  value = "True">     <PARAM name = "uiMode" value = "none">     <PARAM name = "windowlessVideo" value = "true"> </OBJECT>

Note that the uiMode value is none. There is no need for the embedded Player to display playback controls because those controls are already available on the Player UI. There is no need to embed the control if you are not playing video content.

For more information about creating Web pages for HTMLView and how to use the application programming interface (API) for the Player, see the Windows Media Player 9 Series SDK. The SDK is also used for creating other presentation enhancements, such as skins and borders.

Customizing the Player with Skins

A skin is simply a user interface for Windows Media Player. For example, when you first open the Player, the interface you see is the full-mode skin. You can open the Skin Chooser feature and choose from a number of different skins that are installed with the Player. You can also download additional skins from the Internet. Figure 10.6 shows a skin that is included with Windows Media Player.

Figure 10.6: Skins can be used to personalize the Player interface.

The Player API enables users to create their own skins, and this makes skins particularly useful for online businesses. You can create your own user interface for the Player by creating image files and writing script that ties the art to the Player API. All the information for creating skins is located in the Windows Media Player SDK.

As you can see, you have complete artistic freedom to create any sort of look for the Player, and to lay out Player controls and interactive elements in any manner. The interface does not have to be rectangular or contain window elements, like a title bar. After creating a skin, you combine the artwork and script files into a compressed file. Then end users can download and install your skin from your Web site or some other method, such as a CD-ROM.

To understand how skins are created, we will see how Contoso created one that will be used as a border.

Customizing the Player with Borders

A border is a collection of image files, digital media, text, and interactive elements that displays in the Now Playing pane of the full mode Windows Media Player. To create a border, you create the graphics and then activate the elements with scripting in a skin definition file. Figure 10.7 shows a finished border in Windows Media Player.

Figure 10.7: Borders are used to customize the Now Playing feature of the Player.

Borders offer a user experience that can be similar to that of HTMLView. The difference is that HTMLView embeds a standard Web page, while borders embed Player skins. The main differences between a skin displayed as a user interface and a skin displayed as a border is that a border does not need to include controls that are already on the Player, such as a Play button, scroll bar, and File menu. In addition, a border can only display rectangular skins. Figure 10.8 shows an example of the Contoso Movies Online border with Player controls added to make it a skin.

Figure 10.8: The Contoso Movies Online border as a skin.

Also a border file can include a playlist and digital media. For example, you can create a border file, also called a Windows Media Download Package, that contains the border skin, a playlist of music files, and the actual music files.

Contoso Movies Online will use borders to package exclusive behind-the-scenes programs. For example, a program can include a playlist of interviews, trailers, and behind-the-scenes clips of a movie that is about to be released. For the most part, the playlist will point to streaming media on the Windows Media server. However, a playlist in a download package can include a mix of downloaded digital media files and links to streaming media.