Media Guide

CoverStory

LANGUAGES:C# | VB.NET | JAVASCRIPT | XAML

ASP.NET VERSIONS:3.5

Media Guide

Using the New Silverlight MediaPlayer Control in ASP.NET3.5 Extensions

By Wei-Meng Lee

Microsoft has released the latest version of Visual Studio2008, and updated the version of the .NET Framework to 3.5. Along with this newrelease, ASP.NET has been bumped up to version 3.5. Although ASP.NET 3.5 hasjust been released, Microsoft is continually working to create new featuresthat extend the capabilities of ASP.NET.

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

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

Creating the Project

Before you start, you must download the ASP.NET 3.5Extensions Preview from http://www.asp.net/downloads/3.5-extensions/.You also need Visual Studio 2008.

After the ASP.NET 3.5 Extensions Preview is downloaded andinstalled, launch Visual Studio 2008 and create a new ASP.NET 3.5 ExtensionsWeb Site project (see Figure 1). In this article, you ll mainly be usingJavaScript 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.5Extensions Web Site project.

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

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

MediaPlayer is a Silverlight control that allows you tointegrate media files into your ASP.NET Web applications. It supports such formatsas .wmv, .wma, and .mp3. The beauty of the control is that it providesprogrammatic 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 (allyou need to know are some simple JavaScript statements to control the MediaPlayercontrol).

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

Figure 3: The smart tag of theMediaPlayer control.

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

To set the MediaPlayer control to play the .wmv file, youcan either set it via the smart tag, or do it in the source view of the page (viathe 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 beable to see the MediaPlayer control and click the Play button to start thevideo. Note that the MediaPlayer control assumes that the Silverlight 1.0plug-in is installed; if not, you ll need to click the onscreen icon todownload the Silverlight 1.0 plug-in.

Changing the Skin of the Player

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

Figure 4: Choosing a new skin forthe MediaPlayer control.

Figure 5: The MediaPlayer controlwith the new skin applied.

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

In the smart tag of the MediaPlayer control, click theSave a copy link and name it Console-Modified.xaml. You ll then be asked if youwant to use the saved copy as the skin. You ll also notice that the newlycreated .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 controlthrough 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 inSolution Explorer, you ll see the XAML markups that make up the UI of theMediaPlayer control (see Figure 7). You must make the necessary changes to thisfile to customize the UI for the control.

Figure 7: The content of the XAMLfile.

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

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

 Canvas.Top="405.548">

 ...

Now when you run the application, you ll notice a circlearound the Play button. Figure 8 shows the Play button before and after thechange.

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

Setting Chapter Points

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

Figure 9: Setting chapter points.

You can set chapter points using the MediaChapterCollection Editor, or by modifying directly the source view of the element using the and elements. Thecode 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">

      ThumbnailImageSource="~/Images/C1.JPG"

      Title="Chapter1" />

      Position="10"

      ThumbnailImageSource="~/Images/C2.JPG"

      Title="Chapter2" />

      Position="47"

      ThumbnailImageSource="~/Images/C3.JPG"

      Title="Chapter3" />

Figure 10: Addingthree chapter points to my video.

The ThumbnailImageSource attribute specifies the image torepresent the particular chapter point. The Position attribute specifies thelocation 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 inred). You can move between chapters by either clicking on the forward orbackward buttons, or jump directly to a chapter by clicking a chapter sthumbnail.

Figure 11: Displaying the thumbnailsfor the various chapter points.

Programmatically Interacting with the MediaPlayer Control

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

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

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

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

      ThumbnailImageSource="~/Images/C1.JPG"

      Title="Chapter1" />

      ThumbnailImageSource="~/Images/C2.JPG"

      Title="Chapter 2" />

      ThumbnailImageSource="~/Images/C3.JPG"

      Title="Chapter3" />

  onclick="returnbtnPlay_onclick()" />

  onclick="returnbtnPause_onclick()"

  disabled="disabled"/>

   Text="Label">

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

Figure 13: The three new controlsadded to the page.

In the

element of the page, add a

     <scripttype="text/javascript">   functionbtnPlay_onclick() {     //---start playingthe media---     $find("MediaPlayer1").play();     //---disable the Playbutton---     $get("btnPlay").disabled = "disabled";      //---enable the Pausebutton---      $get("btnPause").disabled ="";   }   functionbtnPause_onclick() {     //---pause themedia---     $find("MediaPlayer1").pause();     //---enable the Playbutton---     $get("btnPlay").disabled = "";      //---disable thePause button---     $get("btnPause").disabled = "disabled"   }        ... Figure 14: Add a