Walkthrough: Creating a Media Definition File

Introduction

This walkthrough describes how to create and use a media definition file. A media definition file is an XML document that has elements that are referenced by the MediaPlayer control to provide media details, such as a media source location and chapter information. The MediaDefinition property of the MediaPlayer control is used to reference the media definition file.

You can define media chapter details in a media definition file by using Microsoft Expression Encoder. Chapters are markers that help you navigate the media footage, similar to the menu on a DVD. Microsoft Expression Encoder can create thumbnails that represent chapters of the video.

This walkthrough shows you how to perform the following tasks:

Create a media definition file by using Microsoft Expression Encoder.
Reference a media definition file in the MediaPlayer control.
Play the media file and display chapter markers in a Web page.

In order to complete this walkthrough, you will need:

Microsoft Expression Encoder 2.
The .NET Framework version 3.5.
The Silverlight 2 SDK Beta 2.
The Visual Studio 2008 RTM release.
A video file (.wmv file).

Creating a Media Definition File

The Microsoft Expression Media Encoder tool can be used to define markers in the media and provide a placeholder image for the markers when you encode a video. The Expression Media Encoder can also generate a Media Definition file. This file can then be integrated with the MediaPlayer control.

To begin, you will use Microsoft Expression Encoder to create media chapters and a media definition file.

To create a media definition file by using Microsoft Expression Encoder

Start by running Microsoft Expression Encoder.
In the File menu, click New Job.
In the Media Content section, click Import.

The Import Media Files dialog box is displayed.
Select a video file and then click Open.

The Media Content section displays the selected video in the vertical Item tab.
On the right side of the application window, click the Metadata tab.

Note
If you cannot see the Metadata, in the Window menu, click Metadata.
Under Timeline, drag the playhead to the point in the video where you want to add a marker.
In the Markers category, click Add.

A white marker tab appears on the Timeline.
In the Value column, type "Chapter 1".
Add additional chapter markers by repeating steps 5 through 7.
To extract the marker frame as a thumbnail image, select the Thumbnail check box.
Click the Output tab to display media output details.
In the Job Output category, select the Expression template.
Click Encode to encode the video and generate the media definition file.

Note the directory location that is displayed in the Source column of the Media Content section. This directory contains the media definition file, the thumbnail images, and the video.

Creating an ASP.NET Web Site

In order to display the media file by using the MediaPlayer control, you will create an ASP.NET Web site in Visual Studio.

To create a new ASP.NET Web Site in Visual Studio

In the File menu, click New Web Site.

The New Web Site dialog box is displayed.
Under Visual Studio installed templates, select ASP.NET Web Site.
In the Location list, select File System.
Specify a name, path, and language for the application, and then click OK.

Adding the MediaPlayer Server Control to a Web Page

Next you will add and configure a MediaPlayer server control in the Web page and use it to reference the media definition file.

To add a MediaPlayer server control to the Web page

In Solution Explorer, right-click the root of the project and select Open Folder in Windows Explorer.
Copy the media definition file (.xml), any thumbnail images, and the video file that you encoded earlier in Microsoft Expression Encoder into your project.
In the View menu, click Refresh to update the project view in Solution Explorer.
In Solution Explorer, double-click the Default.aspx file to open it.
Switch to Design view.
From the AJAX Extensions tab of the Toolbox, drag the ScriptManager control onto the page.
From the Silverlight controls tab of the toolbox, drag a MediaPlayer server control onto the page. Drop the control under the ScriptManager control.
In the Properties window, set the MediaDefinition property to the location of the media definition file in your project.

Playing the Media File in a Web Page

This section describes how to play the media file.

To play the media file automatically

Press CTRL+F5 to run the page.
Click the player to pause, stop, or play the media file.
Hold the mouse pointer above the timeline in the MediaPlayer control to display the chapter images.
Click a chapter image to move to the related position in the video.