Silverlight Tutorial

Streaming Media Using Silverlight

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 plugin 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.

 <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.

    public void mediaControl(object o, EventArgs e) {

      // Is the media playing?
      if (meVideo.CurrentState == "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.

  
<Canvas
        xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        x:Name="parentCanvas" 
        Loaded="Page_Loaded" 
        x:Class="WetFloor.Page;assembly=ClientBin/WetFloor.dll"
        Width="640"
        Height="480"
        >

 <Canvas.Background>
  <RadialGradientBrush MappingMode="RelativeToBoundingBox" SpreadMethod="Pad">
   <GradientStop Color="#FFE9F0F2" Offset="0"/>
   <GradientStop Color="#FF527481" Offset="1"/>
  </RadialGradientBrush>
 </Canvas.Background>
 <MediaElement RenderTransformOrigin="0.5,0.5" Width="288" Height="200" Canvas.Left="80" Canvas.Top="80" Source="EmergencySituation.wmv" Stretch="Fill" x:Name="Video">
  <MediaElement.RenderTransform>
   <TransformGroup>
    <ScaleTransform ScaleX="1" ScaleY="1"/>
    <SkewTransform AngleX="0" AngleY="-20"/>
    <RotateTransform Angle="0"/>
    <TranslateTransform X="0" Y="0"/>
   </TransformGroup>
  </MediaElement.RenderTransform>
 </MediaElement>

 <MediaElement RenderTransformOrigin="0.5,0.5" Width="288" Height="161.947" Canvas.Left="177.325" Canvas.Top="280" Source="EmergencySituation.wmv" Stretch="Fill" x:Name="Video_Copy">
  <MediaElement.RenderTransform>
   <TransformGroup>
    <ScaleTransform ScaleX="1" ScaleY="-1"/>
    <SkewTransform AngleX="50" AngleY="-20"/>
    <RotateTransform Angle="0"/>
    <TranslateTransform X="0" Y="0"/>
   </TransformGroup>
  </MediaElement.RenderTransform>
  <MediaElement.OpacityMask>
   <LinearGradientBrush EndPoint="0.49,-0.019" StartPoint="0.491,1.083" MappingMode="RelativeToBoundingBox" SpreadMethod="Pad">
    <GradientStop Color="#FF000000" Offset="0"/>
    <GradientStop Color="#00FFFFFF" Offset="1"/>
   </LinearGradientBrush>
  </MediaElement.OpacityMask>
 </MediaElement>

</Canvas>

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 Media 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 Media Encoder (EME) with the Expression Suite of designer tools. EME 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 Media Encoder

Both recorded media and live media sources can be combined into a single encoded stream by using EME. 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.

All material in this Silverlight Tutorial is copyright © 2008 Webucator. The purpose of this website is to help you learn Silverlight on your own and use of the website implies your agreement to our Silverlight Tutorial Terms of Service.