Wahlin on .NET
Silverlight XAML Primer 7: Embedding Media Into Silverlight
Dan walks you through your options.
Silverlight provides several different ways to include shapes, text, pictures and more in an XAML canvas. While
previous articles in this series have covered various XAML elements -- such as Rectangle, Ellipse, ImageBrush and TextBlock -- I still haven't written about embedding media into an application, arguably one of Silverlight's greatest strengths.
This article will be the first of several that will discuss how audio and video can be used in Silverlight applications. I'll start by discussing what types of audio and video Silverlight is capable of handling and then show how easy it is to embed media into a canvas.
Supported Media Types
Applications that need to play various types of audio or video can leverage Silverlight's media support with a minimal amount of coding. The Silverlight 1.0 SDK provides the following details about supported media types, bit rates and channels:
Audio:
- WMA 7: Windows Media Audio 7
- WMA 8: Windows Media Audio 8
- WMA 9: Windows Media Audio 9
- MP3: ISO/MPEG Layer-3
- Input: ISO/MPEG Layer-3 data stream
- Channel configurations: mono, stereo
- Sampling frequencies: 8, 11.025, 12, 16, 22.05, 24, 32, 44.1, and 48 kHz
- Bit rates: 8-320 kbps, variable bit rate
- Limitations: "free format mode" (see ISO/IEC 11172-3, sub clause 2.4.2.3) is not supported
Video:
- WMV1: Windows Media Video 7
- WMV2: Windows Media Video 8
- WMV3: Windows Media Video 9
- WMVA: Windows Media Video Advanced Profile, non-VC-1
- WMVC1: Windows Media Video Advanced Profile, VC-1
There are several tools available to convert to the formats listed above, including Microsoft's Expression Encoder located here. Expression Encoder makes it easy to add watermarks into video, add leaders or trailers, and add markers that can be used to sync video with other actions that may occur in a Silverlight application.
Embedding Media Regardless of which tool you use to generate .WMV files, media can be embedded into a Silverlight canvas by using the MediaElement XAML tag. MediaElement provides attributes such as Source, Height, Width, Stretch and more to control what media file is shown and how it's shown. It also provides several different events that can be used to know when the state of a media object has changed (such as BufferingProgressChanged, MarkerReached and MediaOpened).
Listing 1 shows an example of using MediaElement in an XAML canvas to display a WMV video. You'll see that in addition to adding a Name attribute, the Source of the movie is also defined. Although you can set the Height and Width attributes on the MediaElement, it's generally recommended that you let the media fill its container. If you need the media to be smaller for some reason, re-encoding it to a different size -- instead of setting Height and Width values -- will lead to a better overall viewing experience.
The AutoPlay attribute serves the rather obvious purpose of allowing you to control whether the movie starts automatically or if the end user needs to start the video by clicking a Play button. The Stretch attribute lets you control how video is displayed within its container. It can be assigned one of four values, as shown below:
| Value |
Description |
Fill |
The media content is resized to fill the container's dimensions. The aspect ratio isn't preserved when using this value. |
None |
The media content is shown in its default size. |
Uniform |
The media content is resized to fill the container's dimensions but the original aspect ratio is preserved. |
Uniform to Fill |
The media content is resized to fill the container's dimensions but the original aspect ratio is preserved. The source content is clipped to fit in the destination dimensions if the aspect ratio of the destination rectangle differs from the source. |
Once you've deployed your video, Silverlight XAML file, scripts and Web page to the server, the video is ready to be viewed.
In the next article, I'll explore how events can be tied to media to allow the end user to control when a video starts and stops.
About the Author
Dan Wahlin (Microsoft MVP for ASP.NET and XML Web Services) is the founder of The Wahlin Group which specializes in .NET and SharePoint onsite, online and video training and consulting solutions. Dan also founded the XML for ASP.NET Developers Web site, which focuses on using ASP.NET, XML, AJAX, Silverlight and Web Services in Microsoft's .NET platform. He's also on the INETA Speaker's Bureau and speaks at conferences and user groups around the world. Dan has written several books on .NET including "Professional Silverlight 2 for ASP.NET Developers," "Professional ASP.NET 3.5 AJAX, ASP.NET 2.0 MVP Hacks and Tips," and "XML for ASP.NET Developers." Read Dan's blog here.