Media Guide

Using the New Silverlight MediaPlayer Control in ASP.NET 3.5 Extensions





Media Guide

Using the New Silverlight MediaPlayer Control in ASP.NET 3.5 Extensions


By Wei-Meng Lee


Microsoft has released the latest version of Visual Studio 2008, and updated the version of the .NET Framework to 3.5. Along with this new release, ASP.NET has been bumped up to version 3.5. Although ASP.NET 3.5 has just been released, Microsoft is continually working to create new features that extend the capabilities of ASP.NET.


Some new features didn t make it in to the release of ASP.NET 3.5, so they are packaged in the ASP.NET 3.5 Extensions Preview release:

  • ASP.NET Dynamic Data
  • ADO.NET Entity Framework
  • ADO.NET Data Services
  • Silverlight Controls for ASP.NET


In this article, I ll focus on the new Silverlight MediaPlayer control that allows you to play an audio or video file in ASP.NET Web forms.


Creating the Project

Before you start, you must download the ASP.NET 3.5 Extensions Preview from You also need Visual Studio 2008.


After the ASP.NET 3.5 Extensions Preview is downloaded and installed, launch Visual Studio 2008 and create a new ASP.NET 3.5 Extensions Web Site project (see Figure 1). In this article, you ll mainly be using JavaScript for client-side scripting; hence, it doesn t matter which language (C# or VB.NET) you choose.


Figure 1: Creating a new ASP.NET 3.5 Extensions Web Site project.


In the Toolbox, you ll discover a new tab named ASP.NET 3.5 Extensions (see Figure 2). Here you ll find the new controls available in the ASP.NET 3.5 Extensions Preview release. Double-click the MediaPlayer control to add it to Default.aspx (the default page).


Figure 2: The new controls in the ASP.NET 3.5 Extensions tab.


MediaPlayer is a Silverlight control that allows you to integrate media files into your ASP.NET Web applications. It supports such formats as .wmv, .wma, and .mp3. The beauty of the control is that it provides programmatic access to all the common functions associated with a media file, so there is no need for you to understand much about how Silverlight works (all you need to know are some simple JavaScript statements to control the MediaPlayer control).


In the smart tag of the MediaPlayer control (see Figure 3), you can see several tasks associated with it, such as:

  • Changing the skin of the control to one of the supplied skins.
  • Saving a copy of the skin, then customizing its look and feel to suit your design.
  • Setting the source of the media file to play.
  • Adjusting the volume of the media playback.
  • Setting the media to auto-play when it is loaded.


Figure 3: The smart tag of the MediaPlayer control.


For now, let s add a .wmv file to the project. For my project, I added a file named Tis_the_Season.wmv.


To set the MediaPlayer control to play the .wmv file, you can either set it via the smart tag, or do it in the source view of the page (via the MediaSource attribute of the element), like this:





     Height="240px" MediaSource="~/Tis_the_Season.wmv"

     Width="320px" />



Now when you press F5 in Visual Studio 2008, you ll be able to see the MediaPlayer control and click the Play button to start the video. Note that the MediaPlayer control assumes that the Silverlight 1.0 plug-in is installed; if not, you ll need to click the onscreen icon to download the Silverlight 1.0 plug-in.


Changing the Skin of the Player

As mentioned, you can change in the smart tag of the MediaPlayer control the skin to one of the supplied skins (see Figure 4). Let s change it to Console. Figure 5 shows how the MediaPlayer control looks in design view, as well as at run time.


Figure 4: Choosing a new skin for the MediaPlayer control.


Figure 5: The MediaPlayer control with the new skin applied.


If you don t like the supplied skins, you can modify them to suit your taste. To do so, you must have a good understanding of XAML, the UI language used by Silverlight.


In the smart tag of the MediaPlayer control, click the Save a copy link and name it Console-Modified.xaml. You ll then be asked if you want to use the saved copy as the skin. You ll also notice that the newly created .xaml file is now in your project (see Figure 6).


Figure 6: The saved skin (.xaml).


You also can manually specify the skin for the control through its Source attribute:


 Height="240px" MediaSource="~/Tis_the_Season.wmv

 Source="~/Console-Modified.xaml" Width="320px" />


If you double-click the Console-Modified.xaml file in Solution Explorer, you ll see the XAML markups that make up the UI of the MediaPlayer control (see Figure 7). You must make the necessary changes to this file to customize the UI for the control.


Figure 7: The content of the XAML file.


For the sake of demonstration, I m going to make a small change to this file so you can see how the UI can be modified. Locate the Canvas element named PlayPauseButton and modify to 8 the StrokeThickness attribute of its first child element:


 Height="42.3323" Canvas.Left="159.166"





Now when you run the application, you ll notice a circle around the Play button. Figure 8 shows the Play button before and after the change.


Figure 8: The Play button before and after the change made to the XAML file.


Setting Chapter Points

One useful feature of the MediaPlayer control is the ability to set chapter points in your media file. For example, you can create chapters (markers) in your media file so users can jump directly to a particular point in the media file. In the MediaPlayer control, set chapter points by using the Chapters property collection (see Figure 9).


Figure 9: Setting chapter points.


You can set chapter points using the MediaChapter Collection Editor, or by modifying directly the source view of the element using the and elements. The code segment in Figure 10 shows that I added three chapter points to my video.


 Height="479px" MediaSource="~/Tis_the_Season.wmv"

 Source="~/Console-Modified.xaml" Width="620px">




      Title="Chapter 1" />




      Title="Chapter 2" />




      Title="Chapter 3" />


Figure 10: Adding three chapter points to my video.


The ThumbnailImageSource attribute specifies the image to represent the particular chapter point. The Position attribute specifies the location of the chapter point (in seconds) from the start of the media.


Figure 11 shows the MediaPlayer control with the chapters thumbnails displayed when the user clicks the chapters button (highlighted in red). You can move between chapters by either clicking on the forward or backward buttons, or jump directly to a chapter by clicking a chapter s thumbnail.


Figure 11: Displaying the thumbnails for the various chapter points.


Programmatically Interacting with the MediaPlayer Control

So far, you ve customized the MediaPlayer control declaratively by setting its various elements and attributes. A much more powerful way to interact with the control is to programmatically control it via JavaScript. The MediaPlayer control is an instance of the Sys.UI.Silverlight.MediaPlayer JavaScript class. This class exposes properties, methods, and events that enable you to interact programmatically with the player. Let s now see how you can programmatically control the MediaPlayer control using JavaScript.


First, let s add to the page two HTML buttons and an ASP.NET Label control (see Figure 12). Figure 13 shows how the page will look with these three new controls.



  Height="479px" MediaSource="~/Tis_the_Season.wmv"

  Source="~/Console-Modified.xaml" Width="620px">




      Title="Chapter 1" />



      Title="Chapter 2" />



      Title="Chapter 3" />





  onclick="return btnPlay_onclick()" />


  onclick="return btnPause_onclick()"

  disabled="disabled" />




Figure 12: Add to the page two HTML buttons and an ASP.NET Label control.


Figure 13: The three new controls added to the page.


In the

element of the page, add a



Figure 14: Add a