CoverStory
LANGUAGES:
C# | VB.NET | JAVASCRIPT | XAML
ASP.NET VERSIONS:
3.5
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 MVC
- ASP.NET Dynamic Data
- ASP.NET AJAX
- 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 http://www.asp.net/downloads/3.5-extensions/.
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 <asp:MediaPlayer> element), like this:
<form id="form1" runat="server">
<asp:ScriptManager
ID="ScriptManager1" runat="server" />
<div>
<asp:MediaPlayer
ID="MediaPlayer1" runat="server"
Height="240px" MediaSource="~/Tis_the_Season.wmv"
Width="320px" />
</div>
</form>
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:
<asp:MediaPlayer ID="MediaPlayer1"
runat="server"
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:
<Canvas x:Name="PlayPauseButton"
Width="42.3324"
Height="42.3323"
Canvas.Left="159.166"
Canvas.Top="405.548">
<Path x:Name="Path_A"
Stretch="Fill" StrokeThickness="8"
...
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 <asp:MediaPlayer>
element using the <Chapters> and <asp:MediaChapter> elements. The
code segment in Figure 10 shows that I added three chapter points to my video.
<asp:MediaPlayer ID="MediaPlayer1"
runat="server"
Height="479px" MediaSource="~/Tis_the_Season.wmv"
Source="~/Console-Modified.xaml" Width="620px">
<Chapters>
<asp:MediaChapter
ThumbnailImageSource="~/Images/C1.JPG"
Title="Chapter
1" />
<asp:MediaChapter
Position="10"
ThumbnailImageSource="~/Images/C2.JPG"
Title="Chapter
2" />
<asp:MediaChapter
Position="47"
ThumbnailImageSource="~/Images/C3.JPG"
Title="Chapter
3" />
</Chapters>
</asp:MediaPlayer>
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.
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<div>
<asp:MediaPlayer
ID="MediaPlayer1" runat="server"
Height="479px"
MediaSource="~/Tis_the_Season.wmv"
Source="~/Console-Modified.xaml" Width="620px">
<Chapters>
<asp:MediaChapter
ThumbnailImageSource="~/Images/C1.JPG"
Title="Chapter
1" />
<asp:MediaChapter
Position="10"
ThumbnailImageSource="~/Images/C2.JPG"
Title="Chapter 2" />
<asp:MediaChapter
Position="47"
ThumbnailImageSource="~/Images/C3.JPG"
Title="Chapter
3" />
</Chapters>
</asp:MediaPlayer>
<br />
<input
id="btnPlay" type="button" value="Play"
onclick="return
btnPlay_onclick()" />
<input
id="btnPause" type="button" value="Pause"
onclick="return
btnPause_onclick()"
disabled="disabled"
/>
<asp:Label
ID="Label1" runat="server"
Text="Label"></asp:Label>
</div>
</form>
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 <form> element of the page, add a <script>
element and insert the JavaScript code shown in Figure 14.
<body>
<form
id="form1" runat="server">
<script
type="text/javascript">
function
btnPlay_onclick() {
//---start playing
the media---
$find("MediaPlayer1").play();
//---disable the Play
button---
$get("btnPlay").disabled = "disabled";
//---enable the Pause
button---
$get("btnPause").disabled =
"";
}
function
btnPause_onclick() {
//---pause the
media---
$find("MediaPlayer1").pause();
//---enable the Play
button---
$get("btnPlay").disabled = "";
//---disable the
Pause button---
$get("btnPause").disabled = "disabled"
}
</script>
<asp:ScriptManager
ID="ScriptManager1" runat="server" />
...
Figure 14: Add a <script>
element in the <form> element of the page, then insert the JavaScript
code.
Essentially, when the Play button is clicked, the
btnPlay_onclick function is called; when the Pause button is clicked, the
btnPause_onclick function is called. You use the $find method to locate the
MediaPlayer control on the page, then call the play method to start playing the
media and the pause method to pause the media. In general, you use the $find
method when you want to invoke a method or set a property on the MediaPlayer
control. To set an HTML control s property or call its method, use the $get
method. In this case, I ve used it to set the disabled property of the two
button controls on the page.
In addition to calling methods on the MediaPlayer control,
there are various events you can handle on the client side. These events are
highlighted in Figure 15.
Figure 15: The various client-side
events managed by the MediaPlayer control.
As an example, let s service the following events:
- onClientVolumeChanged; fired when the user
changes the volume.
- onClientChapterSelected; fired when a chapter is
selected.
- onClientChapterStarted; fired when a new chapter
has started.
The various events to service are indicated by their
respective attributes, as shown here:
<asp:MediaPlayer ID="MediaPlayer1"
runat="server"
Height="479px"
MediaSource="~/Tis_the_Season.wmv"
Source="~/Console-Modified.xaml"
Width="620px"
onclientvolumechanged="VolumeChanged"
onclientchapterselected="ChapterSelected"
onclientchapterstarted="ChapterSelected">
The event handlers for the previous events are defined
within the <script> block (see Figure 16).
function VolumeChanged(sender, args){
//---get the volume---
var vol =
sender.get_volume();
$get("Label1").innerHTML="Volume is " + vol;
}
function ChapterSelected(sender, args){
//---get the current
chapter---
var chapter =
args.get_chapter();
$get("Label1").innerHTML="Chapter title: " +
chapter.get_title();
};
Figure 16: Event
handlers defined in the <script> block.
Now when you run the application and make changes to the
volume, the volume will be shown in the Label control. In addition, when a new
chapter has started, its status will be shown in the Label control (see Figure
17).
Figure 17: Displaying information
when the serviced events are fired.
For a detailed list of properties, methods, and events
supported by the MediaPlayer control, check out the online documentation at http://quickstarts.asp.net/3-5-extensions/reference/silverlightref/T_Sys_UI_Silverlight_MediaPlayer.aspx.
Notice that when you are retrieving property values from
the MediaPlayer control, you must prefix the property value with the get
keyword. For example, to get the current chapter being played, you use the
get_chapter method. To set a value to a property, you prefix it with the set
keyword. For example, if you want to jump directly to a particular time in the
media, you can use the set_position method, like this:
//---jump to the 14th second---
$find("MediaPlayer1").set_position(14);
Creating Playlists
Instead of displaying a single media file, you can
configure a list of media files to be played sequentially in a playlist. All
you need to do is to create an .asx file in your project and set accordingly the
media files you want to play. For example, the file (Playlist.asx) in Figure 18
contains two movies to be played sequentially.
<asx version="3.0">
<entry>
<title>Tis the
Season</title>
<author>Author's
Name</author>
<copyright>Copyright
(c)</copyright>
<ref
href="Tis_the_Season.wmv" />
</entry>
<entry>
<title>US Air
Power</title>
<author>US
Airforce</author>
<copyright>Copyright
(c)</copyright>
<ref
href="WindowsMedia.wmv" />
</entry>
</asx>
Figure 18: Play two
movies sequentially.
To set the MediaPlayer control to play the two movies in
the playlist, set its MediaSource attribute to the name of the playlist, like
this:
<asp:MediaPlayer ID="MediaPlayer1"
runat="server"
Height="254px"
MediaSource="~/Playlist.asx" ...
Conclusion
You ve had a quick look at the MediaPlayer control
available in the ASP.NET 3.5 Extensions Preview. Rather than create your own
Silverlight control to play media files in your ASP.NET applications, you can
simply use the MediaPlayer control, saving you lots of time and effort.
The source code
accompanying this article is available for download.
Wei-Meng Lee (http://weimenglee.blogspot.com) is
a Microsoft MVP and founder of Developer Learning Solutions (http://www.learn2develop.net), a
technology company specializing in hands-on training on the latest Microsoft
technologies. He is an established developer and trainer specializing in .NET
and wireless technologies. Wei-Meng speaks regularly at international
conferences and has authored and co-authored numerous books on .NET, XML, and
wireless technologies. He writes extensively on topics ranging from .NET to Mac
OS X. He also is the author of.NET Compact
Framework Pocket Guide, ASP.NET 2.0: A
Developer s Notebook (both from O Reilly Media, Inc.), and Programming Sudoku (Apress).