Embedding Media Content into the web page

7/25/2010 5:07:52 PM

I_section3_d1e8559.html Silverlight

Embedding Media Content

If you only want to use media on your Silverlight page (i.e., movie and audio data), you can even avoid creating the necessary XAML yourself. The Silverlight SDK contains a special web control called <asp:MediaPlayer> that takes care of both setting up the required XAML and embedding it into the web page (like <asp:Silverlight> does). The web control supports several properties, and the following is a list of the most interesting ones, apart from the mandatory Width and Height:

MediaSource: The URL of the video or audio file to embed
AutoPlay: Whether the media will be played automatically once the page has been loaded (true) or not (false)
Muted: Whether the audio will be off (probably not a bad idea for commercial web sites)
PlaceholderImageUrl: The URL of an image that is displayed as a placeholder while the media content is loaded
ScaleMode: How to scale the content; choose from ScaleMode.None (no scaling), ScaleMode.Stretch (stretch without keeping the aspect ratio), and ScaleMode.Zoom (stretch and keep the aspect ratio)
Volume: The volume of the audio portion of the media

As with <asp:Silverlight>, <asp:MediaPlayer> also requires a ScriptManager control to be present. Example 1 shows a page with an embedded WMV video. No XAML or JavaScript is to be seen.

Example 1. Embedding media content (Media.aspx)

Code View:

<%@ Page Language="C#" %>

<%@ Register Assembly="System.Web.Extensions, Version=3.6.0.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"
  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 xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Silverlight</title>
</head>
<body>
  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div>
      <asp:MediaPlayer ID="Media1" runat="server" 
        MediaSource="video.wmv" AutoPlay="true"
        Width="320" Height="240" />
    </div>
  </form>
</body>
</html>

The client output of the preceding code is very similar to the one <asp:Silverlight> was creating in the previous section. However, there are two obvious changes: the <object> tag is missing (but is created by JavaScript code), and the initialization method sets up the MediaPlayer control:

Code View:

<div>
      <span id="Media1_parent"></span>
<script type="text/javascript">
//<![CDATA[
Sys.UI.Silverlight.Plugin.create("Media1_parent", "1.0", 1, "\u003cobject 
type=\"application/x-silverlight\" data=\"data:,\" id=\"Media1\" 
style=\"height:240px;width:320px;\"\u003e\r\n\r\n\u003c/object\u003e");
//]]>
</script>

    </div>
    

<script type="text/javascript">
//<![CDATA[
Sys.Application.initialize();
Sys.Application.add_init(function() {
    $create(Sys.UI.Silverlight.MediaPlayer, {"autoPlay":true,"mediaSource":
"video.wmv","scaleMode":1,"source":"/Silverlight_Web/WebResource.axd?d=UWvRBn2D
vlAG1qPj1sEy8HZXD30sZ0KcGEYDUyVCC-Hn51Pnb5xTrEvCUJJOmiUwlEsRMyw82Qw4YzS6q3RmGBy
9jFQYPNgFIpKmO8HkyTk1&t=633378050096020000"}, null, null, $get("Media1"));
});
//]]>

</script>

So, indeed, the JavaScript code embeds the media using the <object> HTML element. This is no surprise, since <asp:MediaPlayer> is creating XAML markup to embed the video or audio content. However, the initialization of this <object> element, in the <script> section, is different. The source property is set to this URL (the exact name will vary on your system, because the current time is embedded in the URL):

Code View:

/Silverlight_Web/WebResource.axd?d=UWvRBn2DvlAG1qPj1sEy8HZXD30sZ0KcGEYDUyVCC-Hn
51Pnb5xTrEvCUJJOmiUwlEsRMyw82Qw4YzS6q3RmGBy9jFQYPNgFIpKmO8HkyTk1&t=633378050096
020000

So, no static XAML file is sent down to the browser; instead, the ASP.NET Futures creates a handler that will return dynamically generated XAML content. In case you are curious, use a tool such as Firebug (http://www.getfirebug.com/) to sniff incoming traffic and have a look at the dynamic XAML.

The Media control also supports subelements. One is <Scripts>, which allows you to load the JavaScript libraries you need in a movie. Another one is <Chapters>. This allows you to use markup to add chapters to a movie . For each chapter marker, you need an <asp:MediaChapter> element and the following properties:

Position: The start time of the chapter
Title: The title of the chapter
ThumbnailImageSource: The thumbnail image that marks the chapter

Example 2 shows what this can look like, when you hover over the video, all markers are shown. Clicking on one of them jumps to the appropriate position in the video.

Example 2. Adding chapters to a video (MediaChapter.aspx)

Code View:

<%@ Page Language="C#" %>

<%@ Register Assembly="System.Web.Extensions, Version=3.6.0.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"
  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 xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Silverlight</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div>
      <asp:MediaPlayer ID="Media1" runat="server" 
        MediaSource="video.wmv" AutoPlay="true"
        Width="320" Height="240">
        <Chapters>
          <asp:MediaChapter Position="13.200" Title="Junction" 
                            ThumbnailImageSource="marker1.png" />
          <asp:MediaChapter Position="26.300" Title="Olympic Stadium" 
                            ThumbnailImageSource="marker2.png" />
          <asp:MediaChapter Position="48.0" Title="Olympic Tower" 
                            ThumbnailImageSource="marker3.png" />
        </Chapters>  
      </asp:MediaPlayer>
    </div>
    </form>
</body>
</html>

Other

Communicating with the Silverlight Plug-in

XAML in WPF