Walkthrough: Creating Chapter Markers for the MediaPlayer Control

Introduction

This walkthrough introduces chapter markers for the ASP.NET MediaPlayer server control. Chapter markers for the MediaPlayer control can be defined in more than one way. You can add media chapter details by creating a media definition file that the MediaPlayer control references. You can also add media chapter details directly in the markup of the MediaPlayer control in a Web page. As an alternative to editing the markup directly, in Visual Studio you can add media chapter details by using the MediaChapter Collection Editor dialog box.

The walkthrough shows you how to perform the following tasks:

  • Add a video file (.wmv) to a MediaPlayer control.

  • Use the MediaChapter Collection Editor dialog box in Visual Studio to add chapter markers to the MediaPlayer control.

  • Play the media file and display chapter markers in a Web page.

In order to complete this walkthrough, you will need:

  • The Microsoft Visual Studio 2008 RTM release.

  • The .NET Framework version 3.5.

  • The Silverlight 2 Beta 2 SDK release.

  • A video file (.wmv file).

  • Three image files to use as chapter thumbnails.

Creating an ASP.NET Web Site

In order to display a media file in a browser, you will create an ASP.NET Web site in Visual Studio.

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

  1. In the File menu, click New Web Site.

    The New Web Site dialog box is displayed.

  2. Under Installed templates, select ASP.NET Web Site.

  3. In the Location list, select File System.

  4. Specify a name, path, and language for the application, and then click OK.

    Visual Studio creates the Web site project and creates and opens the Default.aspx file.

Adding the MediaPlayer Server Control to a Web Page

Next you will add a MediaPlayer server control to the Web page.

To add a MediaPlayer server control to the Web page

  1. If the Default.aspx page is not already open, in Solution Explorer, double-click the Default.aspx file.

  2. Switch to Design view.

  3. From the AJAX Extensions tab of the Toolbox, drag a ScriptManager control onto the page.

  4. From the Silverlight controls tab of the Toolbox, drag a MediaPlayer server control onto the page and drop it under the ScriptManager control.

Creating Chapter Markers

Now you will configure the MediaPlayer control to include a collection of chapters.

To create chapter information for the MediaPlayer control

  1. Select the MediaPlayer control.

  2. In the Properties window, in the Chapters box, click the ellipsis button ([…]).

    The MediaChapter Collection Editor dialog box is displayed.

  3. In the MediaChapter Collection Editor dialog box, do the following:

    1. Click the Add button to add a chapter.

    2. In the Title field, enter Chapter 1.

    3. In the Position field, enter 5 to add a chapter marker at 5 seconds.

    4. In to the Thumbnail Source field, add a reference to one of the image files.

  4. Repeat the previous step to add two additional chapters with the following values:

    Title: Chapter 2

    Position: 10

    Title: Chapter 3

    Position: 18

  5. Click OK.

Playing the Media File

This section describes how to play the media file.

To play the media file and select chapters

  1. Press CTRL+F5 to run the page.

    The page is displayed and the video file starts playing.

  2. Stop or pause the player.

  3. If you added thumbnail source images to the Chapters collection, hold the mouse pointer over the timeline in order to view a menu of chapters, and then click a chapter image to move to that chapter.

  4. Click the forward or back buttons to move to the next or previous chapter.

  5. Click the play button.

See Also

This topic is ASP.NET Extensions documentation and is unsupported by Microsoft. Blank topics are included as placeholders and existing content is subject to change in future releases.