Streaming Media Using Silverlight
- How to integrate multimedia into a Silverlight application
- About Microsoft Expression Encoder (EE) and the Silverlight media player
- To stream various types of media
This lesson will introduce the ability to play various types of multimedia sources in a Silverlight application.
Integrating Multimedia
One of the primary marketing hooks for Silverlight is its ability to stream media over the Web. Silverlight is able to do so using an embedded media player so that the client system does not need to have a player installed. This is a different approach from other media technologies. Most media technologies require that the client has a particular media player installed. With Silverlight, once the Silverlight plug-in is installed all Silverlight features are accessible, including media playback.
In an earlier module, we reviewed how to integrate multimedia into an ASP.NET AJAX application through the use of the ASP.NET Futures asp:Media control. The asp:Media control is an implementation of the Silverlight <MediaElement> element. The <MediaElement> element is used to connect to multimedia sources from Silverlight. The following markup snippet is used to display a simple video in WMV format. (see footnote)
<MediaElement Width="472" Height="328" Canvas.Left="40" Canvas.Top="40" Source="EmergencySituation.wmv" Stretch="Fill"/>
The result of the markup above is shown in the following figure.
By modifying the markup above slightly, we can gain control over the media playback. The MediaElement should have a name assigned to it and it can then be accessed using code. In the markup snippet below, the MediaElement fires the mediaControl method when the left mouse button is released.
<MediaElement Width="472" Height="328" Canvas.Left="40" Canvas.Top="40" Source="EmergencySituation.wmv" Stretch="Fill" x:Name="meVideo" MouseLeftButtonUp="mediaControl" />
The mediaControl method is shown below.
if (meVideo.CurrentState == MediaElementState.Playing)
{
meVideo.Pause();
}
else
{
meVideo.Play();
}
As a result of the modifications above, the media playback can be paused and started by clicking the media element control.
Another popular visual effect when playing video using Silverlight or WPF is called the "wet floor" effect. This effect can easily be accomplished by using Expression Blend and consists of displaying a video twice, once for display and once for reflection. The XAML shown below is used to generate the wet floor effect and will be illustrated in class.
Code Sample: StreamingMediaUsingSilverlight/Demos/WetFloor/WetFloor/Page.xaml
<UserControl x:Class="WetFloor.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="600" Height="400" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid x:Name="LayoutRoot">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF000000"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<MediaElement Source="EmergencySituation.wmv" x:Name="meVideo" Opacity="1" Width="400" Height="250" d:LayoutOverrides="Height" VerticalAlignment="Bottom" Margin="104,0,96,-126" Stretch="Fill" RenderTransformOrigin="0.5,0.5" >
<MediaElement.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#00000000" Offset="0.636"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
</LinearGradientBrush>
</MediaElement.OpacityMask>
<MediaElement.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="-1"/>
<SkewTransform/>
<RotateTransform Angle="-180.16900634765625"/>
<TranslateTransform/>
</TransformGroup>
</MediaElement.RenderTransform>
</MediaElement>
<Rectangle HorizontalAlignment="Stretch" Margin="104,26,96,124" VerticalAlignment="Stretch" Stroke="#FF000000" StrokeThickness="0" Width="400" Height="250">
<Rectangle.Fill>
<VideoBrush SourceName="meVideo" />
</Rectangle.Fill>
</Rectangle>
</Grid>
</UserControl>
The result of the XAML above is shown in the following figure.
Silverlight currently supports the following types of media:
- Advanced Stream Redirector (ASX) playlist file format
- Windows Media Audio 7 (WMA 7)
- Windows Media Audio 8 (WMA 8)
- Windows Media Audio 9 (WMA 9)
- ISO/MPEG Layer-3 compliant data stream input (MP3)
- Windows Media Video 7 (WMV 1)
- Windows Media Video 8 (WMV 2)
- Windows Media Video 9 (WMV 3)
- Windows Media Video Advanced Profile, non-VC1 (WMVA)
- Windows Media Video Advanced Profile, VC1 (WMVC1)
Microsoft Expression Encoder
Audio and video, and the combination thereof, are generically referred to as media. Media may exist in various formats. Most media vendors, such as Microsoft, Apple, and Real, distribute and save media in proprietary formats. Most media players will play media in multiple formats. There are also industry standard media formats that most players also support. Media may be stored in a particular format when it is saved after being recorded or may be converted from one format to another using a converter tool.
When media is prepared for playback in a particular format, the process is referred to as media encoding. During the encoding process, the stream of media bits may also be manipulated and modified. For instance, by using a media encoder, a media (video / audio) stream may be played to a certain point and then another media source may be interjected. Television production studios perform this type of encoding action to interject a commercial into a live or recorded media stream (television show) that is being broadcast.
Microsoft released the Expression Encoder (EE) with the Expression Suite of designer tools. EE offers advanced media editing and encoding functionality including the ability to encode and stream media from the file system or media being recorded live, overlay media elements, and add closed captioning to streamed media. Expression Media Encoder is shown in the figure below.
Encoding Media Using Expression Encoder
Both recorded media and live media sources can be combined into a single encoded stream by using EE. Additionally, the encoded stream may be manipulated as well. To capture a live stream, select the Live Encoding Mode button. The live encoding mode is shown in the figure below.
To capture a live stream, in the Live Sources tab, select a video and audio device and then select start. In the File Sources tab, recorded media streams may also be selected. In the Output tab in live mode, output may be streamed or sent to a file or both. In the figure below, a live stream is being captured and spliced into a recorded stream.
Furthermore, by selecting the option in the Encoding tab to script the stream, you can insert script commands that will be handled as they are encountered in the stream.
Lab: Streaming Media Using Silverlight
In this lab, you will stream recorded media in a Silverlight application, dress up the streamed media interface, stream media, and display the result in the simulated television used in the previous lab.
Exercise: Stream Media Using Wet Floor Effect
In this exercise, you will stream a recorded media file in Silverlight and apply the wet floor effect.
- Start or open Visual Studio 2008 and create a new Silverlight project.
- Right-click the project in the Solution Explorer and select Existing Item from the Add menu. Navigate to the Media folder in the Exercises folder, select the EmergencySituation.wmv media in the folder, and click Add.
- Right-click the Page.xaml file in the Solution Explorer and select Open in Expression Blend.
- In Blend, design the canvas to your liking (set the canvas to about 640 X 480) and select the Asset Library button at the bottom of the asset toolbar.
- From the Asset Library dialog, select Show All and then select MediaElement.
- Add a MediaElement control to the canvas. The canvas should resemble the following figure.
- Select the MediaElement and, in the Properties sheet, assign the control a Name, set the Source property, and set the Stretch property.
- Drop a Rectangle on the canvas, size it to the same size as the MediaElement, and position it above the MediaElement as shown below.
- Switch to the XAML editor and modify the Rectangle markup. Remove the Fill attribute and add a child <Rectangle.Fill> element. In the <Rectangle.Fill> element, add a <VideoBrush> child element. Set the SourceName of the <VideoBrush> element to the name of the <MediaElement> name.
- Switch back to the Design view. Select the MediaElement. In the Transformations tab of the Properties sheet, select the Flip tab and click the Flip X Axis button.
- Hover the mouse pointer over the corner of the MediaElement until the rotation double arrow pointer is displayed. Rotate the MediaElement 180 degrees.
- With the MediaElement selected, in the Properties sheet, select the GradientBrush option. Select the dark gradient stop marker and set the alpha value to 0. Drag the dark gradient marker to the right until the MediaElement creates the wet floor effect.
- The resulting canvas should resemble the following figure.
- Save the design and close Blend.
- In Visual Studio 2008, press F5 to test the application. The resulting page should resemble the following figure.
Exercise: Stream and Encode Media
In this exercise, you will use Expression Encoder to encode and stream media.
- Start or open Expression Encoder.
- Click the Live Encoding Mode button.
- Select the File Sources tab and click the Add button.
- Navigate to the Media folder in the Exercises folder for this module and select the LondonNewsCast.mpg file. Click Open.
- If your computer is equipped with a Web cam, you may also add a Live Source.
- On the Output tab, select the File Archive checkbox. Store the archived file in the Television exercise folder located in the Exercises folder for this module. Name the archived file "LiveStream".
- Click Cue on the included file source and click the Start button.
- When the file has completed playing, select the Exit Live Mode button.
- On the Output tab, select the Browse for Output Folder button and navigate to the Television exercise folder located in the Exercises folder for this module. Uncheck the Sub-folder by Job Id checkbox.
- Click the Encode button.
- When the stream has completed the encoding process, close Expression Encoder.
Exercise: Display Encoded Media
In this exercise, you will display the media encoded in the previous exercise in a simulated television graphic created in an earlier lab.
- In Visual Studio 2008, open the starter exercise named Television in the Exercises folder.
- Open the Page.xaml file.
- Modify the Source attribute value of the <MediaElement> element to be "LiveStream.wmv".
- Press F5 to test the application.
- Right-click Page.xaml in the Solution Explorer and select Open in Expression Blend.
- In Blend, select each of the small control button icons and assign each a name. Save the design and close Blend. The resulting design should resemble the following figure.
- In Visual Studio 2008, open the Page.xaml.cs code behind file. Add three event handlers, one to start the media player, one to pause the media player, and one to stop the media player as shown in the code snippet below.
public void mediaStart(object o, MouseEventArgs e) { sampleVideo.Play(); } public void mediaPause(object o, MouseEventArgs e) { sampleVideo.Pause(); } public void mediaStop(object o, MouseEventArgs e) { sampleVideo.Stop(); } - In the Page.xaml file, for each of the control button icons (ellipse shapes), assign the appropriate event handler to the MouseLeftButtonUp event as shown in the markup snippet below.
<Ellipse Width="12" Height="12" Fill="#FF55B54D" Stroke="#FF000000" Canvas.Left="32" Canvas.Top="172" x:Name="shpStart" MouseLeftButtonUp="mediaStart"/> <Ellipse Width="12" Height="12" Fill="#FFF0340C" Stroke="#FF000000" Canvas.Left="64" Canvas.Top="172" x:Name="shpStop" MouseLeftButtonUp="mediaStop"/> <Ellipse Width="12" Height="12" Fill="#FFC9D224" Stroke="#FF000000" Canvas.Left="48" Canvas.Top="168" x:Name="shpPause" MouseLeftButtonUp="mediaPause"/>
- Press F5 to test the application. The resulting page should resemble the following figure.
Streaming Media Using Silverlight Conclusion
In this lesson of the Silverlight tutorial, you
- Integrated multimedia into a Silverlight application
- Learned about streaming various types of multimedia
Footnotes
-
If you want to design a Silverlight file by using Expression Blend and want to add a <MediaElement> to the file, you will need to select the Asset Library button at the bottom of the toolbar, select the option to Show All, and then select the MediaElement.