[Note: This topic is pre-release documentation and is subject to change in future releases. Blank topics are included as placeholders.]
The ASP.NET MediaPlayer server control enables you to integrate media sources such as audio (WMA) and video (WMV) into a Web application, without requiring any knowledge of XAML or JavaScript. This control is an instance of the MediaPlayer class. The MediaPlayer class inherits from the Silverlight class.
The MediaPlayer control generates the appropriate markup and code to display and control media in the media player UI. The MediaPlayer control can use pre-built skins, or you can create custom skins. For example, you can reference a custom XAML document that is generated through Microsoft Expression Encoder and that supports captions, chapters, and markers in the media source. When you configure the MediaPlayer control to reference a pre-built skin, the associated XAML document is copied into the project. The MediaSkinSource()()() property of the MediaPlayer is also set to point to the referenced skin.
In addition, you can work with a client JavaScript object that manages user interaction with the player.
.gif) Note: |
|---|
Web pages that use the MediaPlayer server control must include a ScriptManager control. |
This topic contains the following sections:
Using the MediaPlayer Server Control
To use the MediaPlayer server control, you reference a media source file (for example, a .wmv, .wma, or .mp3 file) and select a built-in skin. The MediaPlayer server control supports the media formats supported by the Silverlight plug-in. For more information, see Supported Media Formats, Protocols, and Log Fields on the MSDN Web site.
The following example shows the declarative markup for a MediaPlayer server control that is configured to play the file Video.wmv and to use the skin that is defined in the Professional.xaml file.
<asp:MediaPlayer
ID="MediaPlayer1"
runat="server"
MediaSource="~/Media/video.wmv"
MediaSkinSource="~/MediaSkins/Professional.xaml"
ScaleMode="Stretch"
AutoLoad="true"
AutoPlay="false"
PluginBackground="Black"
Height="240px"
Width="320px">
</asp:MediaPlayer>
At run time, the MediaPlayer control creates the Sys.UI.Silverlight.MediaPlayer client script class (based on the model used in the ASP.NET AJAX Extensions). This class provides a JavaScript programming model that you can use to control the client player.
The MediaPlayer control supports different media file types that include .wmv, .wma and .mp3. It can also use content that is available through the mms://<url moniker> protocol, and it can reference client playlists as .asx files. For more information, see Supported Media Formats, Protocols, and Log Fields.
The following code example shows how to use the MediaPlayer control. The MediaPlayer control enables you to select a skin file and media file. The markup in this example includes three MediaPlayer controls. Each control uses the ScaleMode()()() property to manipulate the appearance of the media player.
<%@ Page Language="VB" %>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html >
<head id="Head1" runat="server">
<title>ASP.NET Controls for Silverlight</title>
<link href="~/SilverlightStyles.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="false" />
<div>
<h2>ASP.NET Controls for Silverlight: Using The MediaPlayer Server Control</h2>
<p></p>
<asp:MediaPlayer runat="server" ID="MediaPlayer1" ScaleMode="Stretch" AutoPlay="true"
MediaSource="../media/expressionstudio.wmv" Height="240" Width="320"
PluginBackgroundColor="Black" MediaSkinSource="../skins/Expression.xaml"/>
<p></p>
<asp:MediaPlayer runat="server" ID="MediaPlayer2" ScaleMode="None" AutoPlay="true"
MediaSource="../media/expressionstudio.wmv" Height="240" Width="320"
PluginBackgroundColor="Black" MediaSkinSource="../skins/Expression.xaml" />
<p></p>
<asp:MediaPlayer runat="server" ID="MediaPlayer3" ScaleMode="Zoom" AutoPlay="true"
MediaSource="../media/expressionstudio.wmv"
PluginBackgroundColor="Black" MediaSkinSource="../skins/Expression.xaml" />
</div>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html >
<head id="Head1" runat="server">
<title>ASP.NET Controls for Silverlight</title>
<link href="~/SilverlightStyles.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="false" />
<div>
<h2>ASP.NET Controls for Silverlight: Using The MediaPlayer Server Control</h2>
<p></p>
<asp:MediaPlayer runat="server" ID="MediaPlayer1" ScaleMode="Stretch" AutoPlay="true"
MediaSource="../media/expressionstudio.wmv" Height="240" Width="320"
PluginBackgroundColor="Black" MediaSkinSource="../skins/Expression.xaml"/>
<p></p>
<asp:MediaPlayer runat="server" ID="MediaPlayer2" ScaleMode="None" AutoPlay="true"
MediaSource="../media/expressionstudio.wmv" Height="240" Width="320"
PluginBackgroundColor="Black" MediaSkinSource="../skins/Expression.xaml" />
<p></p>
<asp:MediaPlayer runat="server" ID="MediaPlayer3" ScaleMode="Zoom" AutoPlay="true"
MediaSource="../media/expressionstudio.wmv"
PluginBackgroundColor="Black" MediaSkinSource="../skins/Expression.xaml" />
</div>
</form>
</body>
</html>
See a run-time code example of this feature: Run.
Creating and Using Chapters in the MediaPlayer Control
You can define chapters in a video media source by using the Chapters()()() collection property. Typically the chapters also represent markers in the video where you can process client events when chapter points are reached. If you encode a video source by using the Microsoft Expression Media Encoder tool, you can define markers in the media and provide thumbnail images for the markers. The generated output from the tool creates the encoded video and the thumbnail image files that you can reference from the MediaPlayer control.
You can use Visual Studio to create the MediaPlayer control and use the Web forms designer in Visual Studio to select chapter images. Additionally, you can include MediaChapter elements in the markup to represent the position of a chapter in a media source.
The following example shows the declarative markup for a MediaPlayer control with the Chapters()()() property set to define three chapters.
<asp:MediaPlayer
ID="MediaPlayer1"
runat="server"
MediaSource="~/Media/video.wmv"
MediaSkinSource="~/MediaSkins/Professional.xaml"
PlaceholderSource="~/media/image0.jpg"
ScaleMode="Stretch"
AutoLoad="true"
AutoPlay="false"
PluginBackground="Black"
Height="240px"
Width="320px">
<Chapters>
<asp:MediaChapter
Position="5"
ThumbnailSource="~/Media/image1.jpg"
Title="Section 1." />
<asp:MediaChapter
Position="10"
ThumbnailSource="~/Media/image2.jpg"
Title="Section 2." />
<asp:MediaChapter
Position="15"
ThumbnailSource="~/Media/image3.jpg"
Title="Section 3." />
</Chapters>
<PluginNotInstalledTemplate>
Silverlight is not installed.
</PluginNotInstalledTemplate>
</asp:MediaPlayer>
In this example, the MediaPlayer control is set to use the Professional.xaml skin. This XAML skin file provides support for chapter information. At run time, when users hold the mouse pointer underneath the video area for this skin, a scrollable chapter list is displayed. When users select a chapter from the list, the time slider position of the player is moved to the selected chapter in the video.
<%@ Page Language="VB" %>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html >
<head id="Head1" runat="server">
<title>ASP.NET Controls for Silverlight</title>
<link href="~/SilverlightStyles.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="false" />
<div>
<asp:MediaPlayer runat="server" ID="MediaPlayer1" ScaleMode="Stretch" AutoPlay="true"
MediaSource="../media/expressionstudio.wmv" Height="480" Width="640"
PluginBackground="Black" MediaSkinSource="../skins/Professional.xaml">
<Chapters>
<asp:MediaChapter ThumbnailSource="../media/MarkerThumb 00.00.00.jpg"
Position="0.0" Title="Chapter 1" />
<asp:MediaChapter ThumbnailSource="../media/MarkerThumb 00.00.10.jpg"
Position="10" Title="Chapter 2" />
<asp:MediaChapter ThumbnailSource="../media/MarkerThumb 00.00.24.jpg"
Position="24" Title="Chapter 3" />
</Chapters>
</asp:MediaPlayer>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html >
<head id="Head1" runat="server">
<title>ASP.NET Controls for Silverlight</title>
<link href="~/SilverlightStyles.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="false" />
<div>
<asp:MediaPlayer runat="server" ID="MediaPlayer1" ScaleMode="Stretch" AutoPlay="true"
MediaSource="../media/expressionstudio.wmv" Height="480" Width="640"
PluginBackground="Black" MediaSkinSource="../skins/Professional.xaml">
<Chapters>
<asp:MediaChapter ThumbnailSource="../media/MarkerThumb 00.00.00.jpg"
Position="0.0" Title="Chapter 1" />
<asp:MediaChapter ThumbnailSource="../media/MarkerThumb 00.00.10.jpg"
Position="10" Title="Chapter 2" />
<asp:MediaChapter ThumbnailSource="../media/MarkerThumb 00.00.24.jpg"
Position="24" Title="Chapter 3" />
</Chapters>
</asp:MediaPlayer>
</div>
</form>
</body>
</html>
See a run-time code example of this feature: Run.
The Sys.UI.Silverlight.MediaPlayer client object raises the Sys.UI.Silverlight.MediaPlayer.chapterStarted event when a chapter starts, and it raises the Sys.UI.Silverlight.MediaPlayer.markerReached event when a marker is reached. You can call the get_chapters function to query the Sys.UI.Silverlight.MediaPlayer.chapters property collection. You can call the get_currentChapter function to query the Sys.UI.Silverlight.MediaPlayer.currentChapter property.
For information about how to work with chapters and markers in client script, see Defining MediaPlayer Control Markers and Captions in this topic.
Adding a Media Definition File
You can define the media information for the MediaPlayer control by setting the control's Chapters()()() property. You can also define media information in a media definition file. The media definition file is an XML document that includes information that the MediaPlayer control can read to obtain media details, such as a media source location and chapter information. To reference a media definition file in the MediaPlayer control, you set its MediaDefinition()()() property.
The following example shows the contents of a media definition file.
<mediaDefinition>
<mediaItems>
<mediaItem mediaSource="video.wmv"
placeholderSource="image0.jpg">
<chapters>
<chapter position="5.00"
thumbnailSource="image1.jpg"
title="marker1" />
<chapter position="10.00"
thumbnailSource="image2.jpg"
title="marker2" />
</chapters>
</mediaItem>
</mediaItems>
</mediaDefinition>
References in the media definition file are relative to the file. For example, if the media definition file includes a mediaItem element that has a mediaSource attribute that does not include a path, the file referenced by the mediaSource attribute must be in the same directory as the media definition file.
A MediaPlayer control can include both a Chapters collection and a reference to a media definition file. If this is the case, the media definition file takes precedence if it contains any one of the following:
The Expression Media Encoder tool can generate a media definition file.
Choosing a Skin for the MediaPlayer Control
The MediaPlayer control plays media in a border area. This border area is called the skin (media player UI). It contains the controls, such as buttons and sliders, that users click to view the file, stop and start it, and so on. The MediaPlayer control references a XAML (.xaml) file that contains the skin details.
The MediaPlayer control has multiple skin files. Skins are in separate .xaml files so that you can easily modify the XAML content. You can copy, modify and create new skins.
The provided skin files are as follows:
Professional.xaml
AudioGray.xaml
Basic.xaml
Classic.xaml
Expression.xaml
Futuristic.xaml
Console.xaml
Simple.xaml
The default skin that is contained as part of the MediaPlayer is the same skin that is contained in Classic.xaml.
In Visual Studio, when you import a skin, the corresponding XAML file is copied to your project. The MediaSkinSource property of the MediaPlayer control is set to the URL of the skin file.
At design time, the MediaPlayer control is rendered by using the XAML of the skin with appropriate scaling behavior. When the MediaSkinSource property of the MediaPlayer control is changed, the design-time rendering is updated based on the new XAML.
Customizing a MediaPlayer Control Skin
To change the appearance of the MediaPlayer control's rendered skin, you can use a XAML editor and modify the .xaml file. For example, you might create a custom skin that incorporates a storyboard, a color scheme, or new functionality. You can use Microsoft Expression Blend or another tool to create or modify the XAML.
The following example shows a MediaPlayer control with a skin that is based on the Professional skin. The MediaSkinSource()()() property of the MediaPlayer control references the modified skin (.xaml file).
<%@ Page Language="VB" %>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head id="Head1" runat="server">
<title>ASP.NET Controls for Silverlight</title>
<link href="~/SilverlightStyles.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server" ID="ScriptManager1" EnablePartialRendering="false" />
<asp:MediaPlayer runat="server" ID="MediaPlayer1" ScaleMode="Stretch" AutoPlay="true"
MediaSource="../media/expressionstudio.wmv"
PluginBackground="blue" Height="480" Width="640"
MediaSkinSource="../xaml/BrandedProfessional.xaml" />
</div>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head id="Head1" runat="server">
<title>ASP.NET Controls for Silverlight</title>
<link href="~/SilverlightStyles.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager runat="server" ID="ScriptManager1" EnablePartialRendering="false" />
<asp:MediaPlayer runat="server" ID="MediaPlayer1" ScaleMode="Stretch" AutoPlay="true"
MediaSource="../media/expressionstudio.wmv"
PluginBackground="blue" Height="480" Width="640"
MediaSkinSource="../xaml/BrandedProfessional.xaml" />
</div>
</form>
</body>
</html>
See a run-time code example of this feature: Run.
The XAML markup for a skin uses specifically named elements that are referenced by the JavaScript Sys.UI.Silverlight.MediaPlayer client class, or by classes that derive from it. For more information about skin elements, see XAML Elements of the MediaPlayer Skin.
When you use a skin with the MediaPlayer control, you can also create a custom JavaScript client class to interact with the XAML code in order to provide custom interaction and handling. The MediaPlayer control enables you to associate a new client type with a custom or pre-built skin. To include the JavaScript library that contains the definition of your custom type, you add it to the ScriptManager control. The following example shows the markup for a ScriptManager control and a MediaPlayer control that uses a custom JavaScript class. In the example, the Custom.js file contains the definition for the Custom.MediaPlayer class.
<asp:ScriptManager runat="server" ID="ScriptManager1"
<Scripts>
<asp:ScriptReference Name="SilverlightPlugin.js"/>
<asp:ScriptReference Name="SilverlightControl.js"/>
<asp:ScriptReference Path="Custom.js"/>
</Scripts>
</asp:ScriptManager >
<asp:MediaPlayer runat="server"
ID="MediaPlayer1" ScaleMode="Stretch" AutoPlay="true"
MediaSource="~/media/expressionstudio.wmv"
Height="240" Width="320" PluginBackground="blue"
Source="Custom.xaml" ScriptType="Custom.MediaPlayer" >
</asp:MediaPlayer>
Automatically Loading and Playing the MediaPlayer Media File
The AutoLoad()()() property of the MediaPlayer control specifies whether the media source is loaded immediately after the MediaPlayer control is loaded. The AutoPlay()()() property specifies whether the media file plays as soon as it is loaded.
By default, the MediaPlayer control is loaded when the value of the mediaSource property of the client Sys.UI.Silverlight.MediaPlayer is set. The AutoLoad()()() and AutoPlay()()() properties are useful when a page contains multiple MediaPlayer controls and you want only one media file to load and play automatically.
If AutoLoad()()() and AutoPlay()()() are both set to false, a Start button is displayed in the MediaPlayer control. Clicking the Start button downloads and plays the media file. If the media is already loaded (for example, if AutoLoad()()() is set to true and AutoPlay()()() is set to false), the Start button is not displayed and the Play button is enabled.
Using Client Script with the MediaPlayer Control
The MediaPlayer control provides an instance of the Sys.UI.Silverlight.MediaPlayer client class. This JavaScript class is used to handle the interaction with the XAML and the media on the client by exposing properties, methods, and events. This class enables you to interact with the player by using JavaScript. (The class follows the ASP.NET AJAX Extensions pattern and therefore requires that the ASP.NET AJAX Extensions framework be downloaded to the client computer.) This class is automatically created and is attached to the DOM element that is rendered for the plug-in at run time. The JavaScript class is responsible for handling actions on the player for specific Silverlight UI elements. For example, if the document contains a canvas named "PlayPauseButton", this canvas is bound to the client play and pause methods.
You can bind client-script functions to client events in the MediaPlayer control by setting the client properties in declarative markup instead of by writing JavaScript code. Many of the events take parameters that include context information for that event.
The following example shows markup for the MediaPlayer control that uses the OnClientChapterStarted()()() property to bind the chapterStarted client event handler to the chapterStarted client event.
<asp:MediaPlayer runat="server" ID="MediaPlayer1"
ScaleMode="Stretch" AutoPlay="true"
MediaSource="expressionstudio.wmv"
Height="240"
Width="320"
PluginBackground="blue"
MediaSkin="Professional"
onClientChapterStarted="chapterStarted" >
<Chapters>
<asp:MediaChapter
ThumbnailSource="MarkerThumb 00.00.00.jpg" Position="0.0"
Title="Chapter 1" />
<asp:MediaChapter
ThumbnailSource="MarkerThumb 00.00.10.jpg" Position="10"
Title="Chapter 2" />
<asp:MediaChapter
ThumbnailSource="MarkerThumb 00.00.24.jpg" Position="24"
Title="Chapter 3" />
</Chapters>
</asp:MediaPlayer>
The following example shows a method that is called when the Sys.UI.Silverlight.MediaPlayer.chapterStarted client event is raised.
<script type="text/JavaScript">
function chapterStarted(sender, chapterEventArgs) {
var chapter = sender.get_currentChapter();
$get('Chapters').innerHTML = "Chapter Info: " + chapter.get_title;
}
</script>
By using the Sys.UI.Silverlight.MediaPlayer client instance, you can get information about the player and the media file that it is playing. Any interaction with the Sys.UI.Silverlight.MediaPlayer client object should occur after the plug-in has finished loading the XAML file that it references, and after the media file has been loaded. For example, before you can obtain the markers for a media file, the media file must finish loading. The Sys.UI.Silverlight.MediaPlayer client instance provides events such as mediaOpened, mediaFailed, and mediaEnded that are raised in order to indicate the state of the media file.
The following example shows a series of chapters. As each chapter is reached, the chapter title is displayed based on client events. In some cases, the current chapter might be null, such as if the current time is before the first defined chapter or if the media was closed.
<%@ Page Language="VB" %>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html >
<head id="Head1" runat="server">
<title>ASP.NET Controls for Silverlight</title>
<link href="~/SilverlightStyles.css" type="text/css" rel="Stylesheet" />
<script type="text/JavaScript">
function onChapterStarted(sender, chapterEventArgs) {
var chapter = sender.get_currentChapter();
$get('Chapter').innerHTML = "Currently playing chapter: <i>" + chapter.get_title() + "<\i>";
}
function onMarkerReached(sender, markerReachedEventArgs) {
var marker = markerReachedEventArgs.get_marker();
$get('Marker').innerHTML = "Marker Reached Details:<br/> Type: <i>" + marker.type + "</i><br/> Text: <i>" + marker.text + "<\i>";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="false" />
<div>
<asp:MediaPlayer runat="server" ID="MediaPlayer1" ScaleMode="Stretch" AutoPlay="true"
MediaSource="../media/expressionstudio.wmv" Height="240" Width="320" PluginBackground="blue"
MediaSkinSource="../skins/Expression.xaml" OnClientChapterStarted="onChapterStarted"
OnClientMarkerReached="onMarkerReached">
<Chapters>
<asp:MediaChapter ThumbnailSource="../media/MarkerThumb 00.00.00.jpg" Position="0.0"
Title="Chapter 1" />
<asp:MediaChapter ThumbnailSource="../media/MarkerThumb 00.00.10.jpg" Position="10"
Title="Chapter 2" />
<asp:MediaChapter ThumbnailSource="../media/MarkerThumb 00.00.24.jpg" Position="24"
Title="Chapter 3" />
</Chapters>
<p></p>
</asp:MediaPlayer>
<span style="font-size: large" id="Chapter"></span><p />
<span style="font-size: large" id="Marker"></span>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html >
<head id="Head1" runat="server">
<title>ASP.NET Controls for Silverlight</title>
<link href="~/SilverlightStyles.css" type="text/css" rel="Stylesheet" />
<script type="text/JavaScript">
function onChapterStarted(sender, chapterEventArgs) {
var chapter = sender.get_currentChapter();
$get('Chapter').innerHTML = "Currently playing chapter: <i>" + chapter.get_title() + "<\i>";
}
function onMarkerReached(sender, markerReachedEventArgs) {
var marker = markerReachedEventArgs.get_marker();
$get('Marker').innerHTML = "Marker Reached Details:<br/> Type: <i>" + marker.type + "</i><br/> Text: <i>" + marker.text + "<\i>";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="false" />
<div>
<asp:MediaPlayer runat="server" ID="MediaPlayer1" ScaleMode="Stretch" AutoPlay="true"
MediaSource="../media/expressionstudio.wmv" Height="240" Width="320" PluginBackground="blue"
MediaSkinSource="../skins/Expression.xaml" OnClientChapterStarted="onChapterStarted"
OnClientMarkerReached="onMarkerReached">
<Chapters>
<asp:MediaChapter ThumbnailSource="../media/MarkerThumb 00.00.00.jpg" Position="0.0"
Title="Chapter 1" />
<asp:MediaChapter ThumbnailSource="../media/MarkerThumb 00.00.10.jpg" Position="10"
Title="Chapter 2" />
<asp:MediaChapter ThumbnailSource="../media/MarkerThumb 00.00.24.jpg" Position="24"
Title="Chapter 3" />
</Chapters>
</asp:MediaPlayer>
<p></p>
<span style="font-size: large" id="Chapter"></span><p />
<span style="font-size: large" id="Marker"></span>
</div>
</form>
</body>
</html>
See a run-time code example of this feature: Run.
Defining MediaPlayer Control Markers and Captions
You can define a list of chapters that are related to your media source through the MediaPlayer control. If you use the Microsoft Expression Media Encoder tool, you can define markers in the media and provide a placeholder image for the markers when you encode the video. You can then use the markers to define chapters in the MediaPlayer control.
Similarly, you can create other markers that are known as script commands. These let you define an arbitrary string for the marker that defines its type and another string for its value. By using the instance of the Sys.UI.Silverlight.MediaPlayer class that is created by the MediaPlayer control, you can handle the markerReached event. In the handler for this event, you might pause the media file and execute new XAML storyboards, insert new elements or ads, or perform other tasks.
The following example shows how to manipulate the marker and chapter information. It also shows interaction with the client Sys.UI.Silverlight.MediaPlayer instance. The example shows how to use a script command that defines a custom type named ad. The marker data defines another video (an advertisement) to play by using dynamically inserted XAML markup.
<%@ Page Language="VB" %>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html >
<head id="Head1" runat="server">
<title>ASP.NET Controls for Silverlight</title>
<link href="~/SilverlightStyles.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript">
var __player;
var _infoState = " ";
function pageLoad()
{
// Set global variable
__player = $find('MediaPlayer1');
}
function onMediaOpened(sender, args)
{
$get('InfoVolume').innerHTML = __player.get_volume();
$get('MediaSource').innerHTML = __player.get_mediaSource();
// Set up the buttons
$get('play').disabled = "";
}
function onChapterChanged(sender, args)
{
// When the chapters change, set the chapter image and text in markup.
var chapter = __player.get_currentChapter();
if(chapter === -1) {
$get('ChapterImage').src = "../media/placeholder.jpg";
$get('ChapterIndex').innerHTML = "(none)";
}
else {
$get('ChapterImage').src = __player.get_currentChapter().get_thumbnailSource();
$get('ChapterIndex').innerHTML = __player.get_currentChapter().get_title();
$get('MovieTime').innerHTML = __player.get_position();
}
}
function onMarkerReached(sender, args)
{
// When markers are reached, check their type to set caption text data. For the
// custom 'ad' type, stop the movie and insert the new element and ad movie.
var markerType = args.get_marker().type;
if (markerType === 'NAME')
markerType = 'Chapter';
$get('MarkerType').innerHTML = markerType;
$get('MarkerText').innerHTML = args.get_marker().text;
$get('MovieTime').innerHTML = __player.get_position();
if (markerType === "ad") {
__player.pause();
var host = __player.get_element();
var x = host.content.createFromXaml("<MediaElement Source='../media/" + args.get_marker().text
+ "' AutoPlay='true' MediaEnded='AdEnded' MediaFailed='AdError' Canvas.Top='0' Canvas.Left='0' Width='320' Height='240'/>");
host.content.root.children.add(x);
}
$get('Caption').innerHTML = __player.get_caption();
}
function AdEnded(sender, args)
{
sender.getParent().children.remove(sender);
__player.play();
}
function onStateChanged(sender, args)
{
$get('InfoNewState').innerHTML = sender._oldState;
_infoState += " " + $get('InfoNewState').innerHTML;
}
function onVolumeChanged(sender, args)
{
$get('InfoVolume').innerHTML = sender.get_volume();
if (sender.get_muted()) {
$get('InfoVolume').innerHTML += " (muted)";
}
}
function SetCaption()
{
__player.set_caption($get('txtCaption').value);
}
function SetTime()
{
var time = parseFloat($get('txtTime').value);
__player.set_position(time);
}
function onPlay()
{
__player.play();
$get('pause').disabled = "";
$get('stop').disabled = "";
$get('play').disabled = "disabled";
}
function onPause()
{
__player.pause();
$get('pause').disabled = "disabled";
$get('play').disabled = "";
}
function onStop()
{
__player.stop();
$get('pause').disabled = "disabled";
$get('stop').disabled = "disabled";
$get('play').disabled = "";
}
function AdError(sender, args)
{
$get('InfoState').innerHTML = "Failed to Load Ad, ";
AdEnded(sender);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="false" />
<div>
<table style="border: solid 3px black;">
<tr style="vertical-align:top;">
<td style="width:50%;background-color:#eeeeee;padding:20px;">
<asp:MediaPlayer runat="server" ID="MediaPlayer1" Width="400" Height="300" ScaleMode="Stretch"
MediaSource="../media/expressionstudio.wmv" Volume="1.0"
PlaceholderSource="../media/placeholder.JPG"
OnClientMediaOpened="onMediaOpened"
OnClientChapterStarted="onChapterChanged"
OnClientMarkerReached="onMarkerReached"
OnClientCurrentStateChanged="onStateChanged"
OnClientVolumeChanged="onVolumeChanged">
<Chapters>
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.00.jpg" Position="0.0"
Title="Opening credits and movie start." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.10.2390000.jpg" Position="10.2390000"
Title="Designing and selecting." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.24.1360000.jpg" Position="24.1360000"
Title="Producing designs." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.37.9290000.jpg" Position="37.9290000"
Title="Checking inventory and orders." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.52.3490000.jpg" Position="52.3490000"
Title="Purchasing." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.58.6180000.jpg" Position="58.6180000"
Title="Reviewing." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.01.14.0820000.jpg" Position="74.0820000"
Title="End credits." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.01.22.9640000.jpg" Position="82.9640000"
Title="Silverlight end." />
</Chapters>
</asp:MediaPlayer>
<p />
<input id="txtCaption" type="text" value="" /><button onclick="SetCaption()" type="button">Set Caption</button>
<br />
<input id="txtTime" type="text" value="0" /><button onclick="SetTime()" type="button">Set Time</button>
<p />
<button onclick="onPlay()" id="play" type="button" disabled="disabled">Play</button>
<button onclick="onStop()" id="stop" type="button" disabled="disabled">Stop</button>
<button onclick="onPause()" id="pause" type="button" disabled="disabled">Pause</button>
</td>
<td style="width:50%; background-color:#eeeeee; vertical-align:top;padding:20px;">
Media Source: <span class="spanOutput" id="MediaSource"></span><p />
Player State: <span class="spanOutput" id="InfoState"></span> <span class="error" id="InfoNewState"></span><p /><hr />
Chapter: <span class="spanOutput" id="ChapterIndex">Not Set</span><p />
Chapter Image: <img id="ChapterImage" style="height:100px;width:100px;" alt="Chapter Image" src="../media/placeholder.jpg" /><p />
Chapter Time: <span class="spanOutput" id="MovieTime"></span><p /><hr />
Marker Type: <span class="spanOutput" id="MarkerType"></span><p />
Marker text: <span class="spanOutput" id="MarkerText"></span><p /><hr />
Caption: <span class="spanOutput" id="Caption"></span><p />
Volume: <span class="spanOutput" id="InfoVolume"></span>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html >
<head id="Head1" runat="server">
<title>ASP.NET Controls for Silverlight</title>
<link href="~/SilverlightStyles.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript">
var __player;
var _infoState = " ";
function pageLoad()
{
// Set global variable
__player = $find('MediaPlayer1');
}
function onMediaOpened(sender, args)
{
$get('InfoVolume').innerHTML = __player.get_volume();
$get('MediaSource').innerHTML = __player.get_mediaSource();
// Set up the buttons
$get('play').disabled = "";
}
function onChapterChanged(sender, args)
{
// When the chapters change, set the chapter image and text in markup.
var chapter = __player.get_currentChapter();
if(chapter === -1) {
$get('ChapterImage').src = "../media/placeholder.jpg";
$get('ChapterIndex').innerHTML = "(none)";
}
else {
$get('ChapterImage').src = __player.get_currentChapter().get_thumbnailSource();
$get('ChapterIndex').innerHTML = __player.get_currentChapter().get_title();
$get('MovieTime').innerHTML = __player.get_position();
}
}
function onMarkerReached(sender, args)
{
// When markers are reached, check their type to set caption text data. For the
// custom 'ad' type, stop the movie and insert the new element and ad movie.
var markerType = args.get_marker().type;
if (markerType === 'NAME')
markerType = 'Chapter';
$get('MarkerType').innerHTML = markerType;
$get('MarkerText').innerHTML = args.get_marker().text;
$get('MovieTime').innerHTML = __player.get_position();
if (markerType === "ad") {
__player.pause();
var host = __player.get_element();
var x = host.content.createFromXaml("<MediaElement Source='../media/" + args.get_marker().text
+ "' AutoPlay='true' MediaEnded='AdEnded' MediaFailed='AdError' Canvas.Top='0' Canvas.Left='0' Width='320' Height='240'/>");
host.content.root.children.add(x);
}
$get('Caption').innerHTML = __player.get_caption();
}
function AdEnded(sender, args)
{
sender.getParent().children.remove(sender);
__player.play();
}
function onStateChanged(sender, args)
{
$get('InfoNewState').innerHTML = sender._oldState;
_infoState += " " + $get('InfoNewState').innerHTML;
}
function onVolumeChanged(sender, args)
{
$get('InfoVolume').innerHTML = sender.get_volume();
if (sender.get_muted()) {
$get('InfoVolume').innerHTML += " (muted)";
}
}
function SetCaption()
{
__player.set_caption($get('txtCaption').value);
}
function SetTime()
{
var time = parseFloat($get('txtTime').value);
__player.set_position(time);
}
function onPlay()
{
__player.play();
$get('pause').disabled = "";
$get('stop').disabled = "";
$get('play').disabled = "disabled";
}
function onPause()
{
__player.pause();
$get('pause').disabled = "disabled";
$get('play').disabled = "";
}
function onStop()
{
__player.stop();
$get('pause').disabled = "disabled";
$get('stop').disabled = "disabled";
$get('play').disabled = "";
}
function AdError(sender, args)
{
$get('InfoState').innerHTML = "Failed to Load Ad, ";
AdEnded(sender);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="false" />
<div>
<table style="border: solid 3px black;">
<tr style="vertical-align:top;">
<td style="width:50%;background-color:#eeeeee;padding:20px;">
<asp:MediaPlayer runat="server" ID="MediaPlayer1" Width="400" Height="300" ScaleMode="Stretch"
MediaSource="../media/expressionstudio.wmv" Volume="1.0"
PlaceholderSource="../media/placeholder.JPG"
OnClientMediaOpened="onMediaOpened"
OnClientChapterStarted="onChapterChanged"
OnClientMarkerReached="onMarkerReached"
OnClientCurrentStateChanged="onStateChanged"
OnClientVolumeChanged="onVolumeChanged">
<Chapters>
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.00.jpg" Position="0.0"
Title="Opening credits and movie start." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.10.2390000.jpg" Position="10.2390000"
Title="Designing and selecting." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.24.1360000.jpg" Position="24.1360000"
Title="Producing designs." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.37.9290000.jpg" Position="37.9290000"
Title="Checking inventory and orders." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.52.3490000.jpg" Position="52.3490000"
Title="Purchasing." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.58.6180000.jpg" Position="58.6180000"
Title="Reviewing." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.01.14.0820000.jpg" Position="74.0820000"
Title="End credits." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.01.22.9640000.jpg" Position="82.9640000"
Title="Silverlight end." />
</Chapters>
</asp:MediaPlayer>
<p />
<input id="txtCaption" type="text" value="" /><button onclick="SetCaption()" type="button">Set Caption</button>
<br />
<input id="txtTime" type="text" value="0" /><button onclick="SetTime()" type="button">Set Time</button>
<p />
<button onclick="onPlay()" id="play" type="button" disabled="disabled">Play</button>
<button onclick="onStop()" id="stop" type="button" disabled="disabled">Stop</button>
<button onclick="onPause()" id="pause" type="button" disabled="disabled">Pause</button>
</td>
<td style="width:50%; background-color:#eeeeee; vertical-align:top;padding:20px;">
Media Source: <span class="spanOutput" id="MediaSource"></span><p />
Player State: <span class="spanOutput" id="InfoState"></span> <span class="error" id="InfoNewState"></span><p /><hr />
Chapter: <span class="spanOutput" id="ChapterIndex">Not Set</span><p />
Chapter Image: <img id="ChapterImage" style="height:100px;width:100px;" alt="Chapter Image" src="../media/placeholder.jpg" /><p />
Chapter Time: <span class="spanOutput" id="MovieTime"></span><p /><hr />
Marker Type: <span class="spanOutput" id="MarkerType"></span><p />
Marker text: <span class="spanOutput" id="MarkerText"></span><p /><hr />
Caption: <span class="spanOutput" id="Caption"></span><p />
Volume: <span class="spanOutput" id="InfoVolume"></span>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
See a run-time code example of this feature: Run.
Creating Client Playlists
You can define a client playlist that is in the form of an Advanced Stream Redirector file (.asx file) for the MediaPlayer server control. An .asx file is in XML format and defines the playlist of media entries. Internal URLs are defined relative to the page that the .asx file is loaded from. You can modify the file to prevent skipping, to show specific durations or sections of videos, and to implement other capabilities. The following example shows the definition of the MediaPlayer server control that references an .asx file
<asp:MediaPlayer runat="server" ID="MediaPlayer1"
ScaleMode="Stretch"
AutoPlay="true"
MediaSource="playlist.asx"
Height="240" Width="320"
PluginBackground="blue"/>
The following example shows the contents of the .asx file. Not all elements and features of an .asx file are supported by Silverlight. For more information, see the Silverlight Web site.
<ASX version="3.0">
<TITLE>Client Playlist</TITLE>
<ENTRY>
<TITLE>Movie One</TITLE>
<AUTHOR>Contoso</AUTHOR>
<COPYRIGHT>(c) 2008 Contoso</COPYRIGHT>
<STARTTIME VALUE="00:00:00.00"/>
<DURATION VALUE="00:00:10.00"/>
<REF HREF="movie_one.wmv"/>
</ENTRY>
<CLIENTSKIP="NO">
<TITLE>Movie Two</TITLE>
<AUTHOR>Contoso</AUTHOR>
<COPYRIGHT>(c) 2008 Contoso</COPYRIGHT>
<STARTTIME VALUE="00:00:20.00"/>
<DURATION VALUE="00:00:10.00"/>
<REF HREF="movie_two.wmv" />
</ENTRY>
</ASX>
The following example shows how to use an .asx file to define a client playlist. In this example, a movie in the list is defined as "not skippable", which causes some player controls to be disabled.
<%@ Page Language="VB" %>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html >
<head id="Head1" runat="server">
<title>ASP.NET Controls for Silverlight</title>
<link href="~/SilverlightStyles.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript">
var _infoState = " ";
var _clip = 0;
function onMediaOpened(sender, args) {
var movieUrl = sender.get_mediaElement().Source;
$get('MediaUrl').innerHTML = "Loading Media: " + sender.get_mediaSource() + ": Clip#: " + ++_clip;
$get('MovieTime').innerHTML = String(parseInt(sender.get_position()*10000.0)/10000.0).substring(0, 10);
$get('Duration').innerHTML = sender._duration;
}
function onMediaError(sender, args) {
$get('Error').innerHTML = "Unable to load Media: " + sender.get_mediaSource();
}
function onMarkerReached(sender, args) {
var markerType = args.get_marker().type;
$get('MarkerType').innerHTML = markerType;
$get('MarkerText').innerHTML = args.get_marker().text;
$get('MovieTime').innerHTML = String(parseInt(sender.get_position()*10000.0)/10000.0).substring(0, 10);
}
function onStateChanged(sender, args)
{
$get('InfoState').innerHTML = _infoState;
$get('InfoNewState').innerHTML = sender._oldState;
_infoState += " " + $get('InfoNewState').innerHTML;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="false" />
<table style="border: solid 3px black;">
<tr style="vertical-align:top;">
<td style="width:50%;background-color:#eeeeee;padding:20px;">
<asp:MediaPlayer runat="server" ID="MediaPlayer1" Width="400" Height="300" ScaleMode="Stretch"
AutoPlay="true" MediaSource="../playlist.asx"
OnClientMediaFailed="onMediaError"
OnClientMarkerReached="onMarkerReached"
OnClientMediaOpened="onMediaOpened"
OnClientCurrentStateChanged="onStateChanged"
PlaceholderImageSource="../media/placeholder.jpg" >
<Chapters>
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.00.jpg" Position="0.0"
Title="Opening credits and movie start." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.10.2390000.jpg"
Position="10.2390000" Title="Designing and selecting." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.24.1360000.jpg"
Position="24.1360000" Title="Producing designs." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.37.9290000.jpg"
Position="37.9290000" Title="Checking inventory and orders." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.52.3490000.jpg"
Position="52.3490000" Title="Purchasing." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.58.6180000.jpg"
Position="58.6180000" Title="Reviewing." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.01.14.0820000.jpg"
Position="74.0820000" Title="End credits." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.01.22.9640000.jpg"
Position="82.9640000" Title="Silverlight end." />
</Chapters>
</asp:MediaPlayer>
<div id="Error" class="error">
</div>
</td>
<td style="width:50%; background-color:#eeeeee; vertical-align:top;padding:20px;">
Media Url: <span class="spanOutput" id="MediaUrl"></span><p />
Player State: <span class="spanOutput" id="InfoState"></span> <span class="error" id="InfoNewState"></span><p /><hr />
Marker Type: <span class="spanOutput" id="MarkerType"></span><p />
Marker text: <span class="spanOutput" id="MarkerText"></span><p /><hr />
Play Time: <span class="spanOutput" id="MovieTime"></span><p /><hr />
Duration Time: <span class="spanOutput" id="Duration"></span><p /> <hr />
</td>
</tr>
</table>
<p></p>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" %>
<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html >
<head id="Head1" runat="server">
<title>ASP.NET Controls for Silverlight</title>
<link href="~/SilverlightStyles.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript">
var _infoState = " ";
var _clip = 0;
function onMediaOpened(sender, args) {
var movieUrl = sender.get_mediaElement().Source;
$get('MediaUrl').innerHTML = "Loading Media: " + sender.get_mediaSource() + ": Clip#: " + ++_clip;
$get('MovieTime').innerHTML = String(parseInt(sender.get_position()*10000.0)/10000.0).substring(0, 10);
$get('Duration').innerHTML = sender._duration;
}
function onMediaError(sender, args) {
$get('Error').innerHTML = "Unable to load Media: " + sender.get_mediaSource();
}
function onMarkerReached(sender, args) {
var markerType = args.get_marker().type;
$get('MarkerType').innerHTML = markerType;
$get('MarkerText').innerHTML = args.get_marker().text;
$get('MovieTime').innerHTML = String(parseInt(sender.get_position()*10000.0)/10000.0).substring(0, 10);
}
function onStateChanged(sender, args)
{
$get('InfoState').innerHTML = _infoState;
$get('InfoNewState').innerHTML = sender._oldState;
_infoState += " " + $get('InfoNewState').innerHTML;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="false" />
<table style="border: solid 3px black;">
<tr style="vertical-align:top;">
<td style="width:50%;background-color:#eeeeee;padding:20px;">
<asp:MediaPlayer runat="server" ID="MediaPlayer1" Width="400" Height="300" ScaleMode="Stretch"
AutoPlay="true" MediaSource="../playlist.asx"
OnClientMediaFailed="onMediaError"
OnClientMarkerReached="onMarkerReached"
OnClientMediaOpened="onMediaOpened"
OnClientCurrentStateChanged="onStateChanged"
PlaceholderImageSource="../media/placeholder.jpg" >
<Chapters>
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.00.jpg" Position="0.0"
Title="Opening credits and movie start." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.10.2390000.jpg"
Position="10.2390000" Title="Designing and selecting." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.24.1360000.jpg"
Position="24.1360000" Title="Producing designs." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.37.9290000.jpg"
Position="37.9290000" Title="Checking inventory and orders." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.52.3490000.jpg"
Position="52.3490000" Title="Purchasing." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.00.58.6180000.jpg"
Position="58.6180000" Title="Reviewing." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.01.14.0820000.jpg"
Position="74.0820000" Title="End credits." />
<asp:MediaChapter ThumbnailSource="../media/ExpressionStudio_MarkerThumb 00.01.22.9640000.jpg"
Position="82.9640000" Title="Silverlight end." />
</Chapters>
</asp:MediaPlayer>
<div id="Error" class="error">
</div>
</td>
<td style="width:50%; background-color:#eeeeee; vertical-align:top;padding:20px;">
Media Url: <span class="spanOutput" id="MediaUrl"></span><p />
Player State: <span class="spanOutput" id="InfoState"></span> <span class="error" id="InfoNewState"></span><p /><hr />
Marker Type: <span class="spanOutput" id="MarkerType"></span><p />
Marker text: <span class="spanOutput" id="MarkerText"></span><p /><hr />
Play Time: <span class="spanOutput" id="MovieTime"></span><p /><hr />
Duration Time: <span class="spanOutput" id="Duration"></span><p /> <hr />
</td>
</tr>
</table>
<p></p>
</div>
</form>
</body>
</html>
See a run-time code example of this feature: Run.
Reference
MediaPlayer
Other Resources