[Note: This topic is pre-release documentation and is subject to change in future releases. Blank topics are included as placeholders.]
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 timeline, 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.
See a video that shows this feature: Watch.
In order to complete this walkthrough, you will need:
Microsoft Expression Encoder 2. For more information, see the Microsoft Expression Web site.
Microsoft Visual Studio 2008.
The .NET Framework version 3.5.
The Silverlight 3 Beta SDK 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-hand side of the application window, click the Metadata tab.
.gif) Note: |
|---|
If you cannot see the Metadata tab, 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 6 and 7.
Select the Thumbnail check box in order to extract the marker frame as a thumbnail image.
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 a 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 Silverlight player to display the chapter images.
Click a chapter image to move to the related position in the video.
Tasks
Concepts