Home > ASP.NET and Silverlight > Media Control

ASP.NET Futures (July 2007): Using the Media Control

The Media control enables you to quickly and easily add media (movie or audio) to your ASP.NET Web application without worrying about XAML or about code to manage the media files. To use the Media control, you just reference a media source file (for example, a .wmv, .wma, or .mp3 file) and select a built-in skin. The following example shows the markup for a Media control.

The Media control defines an ASP.NET AJAX Extensions-style client type to provide a JavaScript programming model with the player and the video. By default this uses the Silverlight 1.0 player and JavaScript programming model.

		
<asp:media runat="server" ID="Media1" 
  ScaleMode="Stretch" AutoPlay="true" MediaUrl="MyVideoFile.wmv" 
  SilverlightBackColor="blue" MediaSkin="Professional" Height="240" Width="320" />
   

The Media control supports a variety of media file types, including .wmv, .wma and .mp3, and can be used to point to content available as mms://<url moniker>. The following example shows how to use the Media control to play a .wmv video file and shows effects of some specific control properties.

Note  You can see a complete list of properties in the server reference topic.

Media server control

You can define chapters within a movie media source using the Chapters collection property. If you encode a video through the Microsoft Expression Media Encoder tool, the generated output can define chapter information as well as chapter images. You can use Visual Studio to create the Media control and use the designer to select these chapter images. The following example shows how to use the Chapters property.

		
<asp:Media runat="server" ID="Media1" AutoPlay="true"
  ScaleMode="True" SilverlightBackColor="blue" MediaSkin="Professional" Height="240" Width="320" >
  <Chapters>  
    <asp:MediaChapter ImageUrl="ExpressionStudio_MarkerThumb 00.00.00.jpg" 
    TimeIndex="0.0" Title="Chapter 1" />
<asp:MediaChapter ImageUrl="ExpressionStudio_MarkerThumb 00.00.10.2399347.jpg" 
    TimeIndex="10.2399347" Title="Chapter 2" />
<asp:MediaChapter ImageUrl="ExpressionStudio_MarkerThumb 00.00.24.1369891.jpg" 
    TimeIndex="24.1369891" Title="Chapter 3" />
  </Chapters>  
</asp:Media>
  

In the example, when you hold the mouse pointer just below the video area, the page displays a chapter list. Selecting a chapter moves the player to that chapter in the video.

Handling Chapters Information

For more information about chapter information, see More on Markers, Chapters, and Captions later in this topic.

If you want to change the appearance of the Media control's rendered skin, you can create your own XAML and .xaml file and then reference the file by setting the XamlUrl property of the Media control. (You can use Microsoft Expression Blend or another tool to create the XAML). The XAML requires named elements if you plan to use the client Sys.Preview.UI.Xaml.Media.Player class or classes that derive from it. When you use a .xaml file with the Media control, you can also create a client script class to interact with the XAML and then associate the XAML with the class, as explained later in this topic.

To simply change the appearance of the control, you can export a built-in skin and then customize it. In Visual Studio, add the Media control to a page. In Design view, in the Media Tasks smart tag, click Configure skin. Select a pre-built skin and then click Export .... If you export a skin, you can continue to use the client type that the Media server control defines.

The following example shows a Media control with a skin based on an exported version of the built-in Professional skin.

Using an exported skin

The Media control assumes the Silverlight 1.0 player by default and provides a client type named Sys.Preview.UI.Xaml.Media.Player. (The type follows the ASP.NET AJAX Extensions patterns and therefore has a dependency on the ASP.NET AJAX Extensions framework.) This type is automatically created and is attached to the DOM element that is rendered for the player at run time. The client type is responsible for handling actions on the player for the specified MediaSkin objects. The type is therefore closely bound to the MediaSkin objects; for example, it assumes specifically named XAML elements.

The Sys.Preview.UI.Xaml.Media.Player class exposes properties, methods, and events that enable you to interact with the player by using JavaScript. Following the ASP.NET AJAX Extensions pattern, you typically add hook-up code in the pageLoad function. The following examples show how to work with this class.

Note  You can see a partial list of the client-script class members for Sys.Preview.UI.Xaml.Media.Player in the client reference topic for the Sys.Preview.UI.Xaml.Control from which the client classes used for the built-in skins derive.

The Media control lets you bind client-script functions to client events by setting the OnClientxxxx properties. The event hookups are mapped to the client class that is generated for the player. Many of the events take parameters that include context information for that event. For example, the chapterStarted event take a parameter of type ChapterEventArgs.

The following code shows an event handler in client script that is called when the chapterStarted event is raised.

		
<asp:Media runat="server" ID="MediaPlayer" ScaleMode="True" AutoPlay="true" Height="300" Width="400"
    OnClientChapterStarted="onChapterStarted" />  
    .. 
    
    <script type="text/JavaScript">
        function onChapterStarted(sender, chapterEventArgs) {
            var chapters = sender.get_chapters();        
            var ci = chapterEventArgs.get_chapterIndex();
            var chapter = chapters[ci];
            
            Sys.Debug.trace("Chapter Info" + chapter.imageUrl + " " + chapter.title);
        }
    </script> 

You can get information about the player and the media file that is playing. To get information about the media file, you might have to wait until the media file is opened. For example, to get markers for a media file, the file must have finished opening. The generated client-script class for the Media control provides various events, such as mediaOpened, that are raised to indicate the state of loading or playing the media file.

You can define a list of chapters related to your media source through the Media control. If you use the Microsoft Expression Media Encoder tool, you can define markers in the movie file and provide a placeholder image for those markers. These will generate external images that you can then use to define chapters in the Media control.

The Sys.Preview.UI.Xaml.Media.Player client type is passed the list of chapters that you define. For each chapter, the chapterStarted event is raised. Typically these chapters occur at marker points in the movie, so the client markerReached event is raised as well. If a marker was defined without an image, a chapter might not be defined. Similarly, if you remove a chapter from the Media control, only the markerReached event is raised.

When you use Microsoft Expression Media Encoder, you can define specialized markers named script commands. These markers let you define a script command "type" and provide some data (text) for that script command. You can specify a script command marker of type caption. These markers provide string data that is used as caption text. If the selected MediaSkin class supports captions, the marker's caption data will be displayed. The Sys.Preview.UI.Xaml.Media.Player type lets you externally set caption data through the set_caption function.

The following example shows how to manipulate the marker and chapter information. This example shows how to use a script command that defines a custom type named ad. The marker data defines another movie (an ad) to play by using dynamically inserted XAML.

Markers, chapters, and captions

The Media control supports the media formats supported by Silverlight. You can therefore define a client playlist (using a .asx file extension) for the Media control. An ASX file is in a simple XML format that defines the playlist of media entries. For information about the XML format, see ASX Elements Reference.

The following example shows how to use an ASX file to define a client playlist. In the example, a movie in the list is defined as "not skippable"; this causes some of the player controls to be disabled.

Client playlists