Share via

Silverlight Audio and Video Overview

  • Article

This overview introduces the multimedia features of Microsoft Silverlight and describes how to integrate sound and video into your Silverlight pages.

This topic contains the following sections:

  • The MediaElement Object
  • MediaElement Properties
  • Controlling Media Playback Interactively
  • Timeline Markers (Synchronization Points)

The MediaElement Object

Adding media to a page is as simple as adding a MediaElement to your markup and providing a Uniform Resource Identifier (URI) to the media to play. The following example creates a MediaElement and sets its Source property to the URI of a video file. The MediaElement begins playing when the page loads.

XAML 
<Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Width="300" Height="300">
  <MediaElement x:Name="media" Source="xbox.wmv" 
    Width="300" Height="300" />
</Canvas>

The MediaElement object can play Windows Media Video (WMV), Windows Media Audio (WMA), and MP3 files. For a detailed list of the formats and protocols supported, see Supported Media Formats and Protocols in Silverlight.

MediaElement Properties

The MediaElement class provides several media-specific properties. The following list describes a few of these properties.

  • AutoPlay: Specifies whether the MediaElement should begin playing automatically. The default value is True.
  • IsMuted: Specifies whether the MediaElement is silenced. A value of True mutes the MediaElement. The default value is False.
  • Stretch: Specifies how video is stretched to fill the MediaElement object. Possible values are None, Uniform, UniformToFill, and Fill. The default is Fill. For more information, see the Stretch enumeration.
  • Volume: Specifies the volume of the MediaElement object's audio as a value from 0 to 1, with 1 being the loudest. The default value is 0.5.

In addition to its media-specific properties, MediaElement also has all the properties of a UIElement, such as Opacity and Clip. For a complete list of MediaElement properties, see the MediaElement reference page.

Controlling Media Playback Interactively

You can interactively control media playback by using the Play, Pause, and Stop methods of a MediaElement object. The following example defines a MediaElement object and several buttons for controlling media playback.

XAML 
<Canvas 
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Width="300" Height="300">
  <MediaElement x:Name="media" Source="xbox.wmv" Width="300" Height="300"
    CurrentStateChanged="media_state_changed" />
  <!-- Stops media playback.--> 
  <Canvas MouseLeftButtonDown="media_stop" 
    Canvas.Left="10" Canvas.Top="265">
    <Rectangle Stroke="Black" 
      Height="30" Width="55" RadiusX="5" RadiusY="5">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="Orange" Offset="0.0" />
          <GradientStop Color="Red" Offset="1.0" /> 
        </RadialGradientBrush>
      </Rectangle.Fill> 
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock> 
  </Canvas>
  <!-- Pauses media playback. -->
  <Canvas MouseLeftButtonDown="media_pause" 
    Canvas.Left="70" Canvas.Top="265">
    <Rectangle Stroke="Black" 
      Height="30" Width="55" RadiusX="5" RadiusY="5">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="Yellow" Offset="0.0" />
          <GradientStop Color="Orange" Offset="1.0" /> 
        </RadialGradientBrush>
      </Rectangle.Fill> 
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock> 
  </Canvas>
  <!-- Begins media playback. -->
  <Canvas MouseLeftButtonDown="media_begin" 
    Canvas.Left="130" Canvas.Top="265">
    <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
      Height="30" Width="55">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="LimeGreen" Offset="0.0" />
          <GradientStop Color="Green" Offset="1.0" /> 
        </RadialGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock> 
  </Canvas>
</Canvas>

The accompanying JavaScript code creates several event handlers and uses the Stop, Pause, and Play methods to control the MediaElement. 

JavaScript 
function media_stop(sender, args) {
    sender.findName("media").stop();
}
function media_pause(sender, args) {
    sender.findName("media").pause();
}
function media_begin(sender, args) {
    sender.findName("media").play();
}

(For more information about retrieving and manipulating Silverlight objects, see Referencing and Modifying Silverlight Objects.)

In addition to stopping, pausing, or playing media, you can also seek to a specific position by setting the Position property of a MediaElement object.

Timeline Markers (Synchronization Points)

A timeline marker is metadata associated with a particular point in a media file. These markers are usually created ahead of time and stored in the media file itself. They are typically used to name different scenes in a video, enable users to seek to a selected position, or provide scripting cues.

When the MediaElement reaches a timeline marker during playback, it raises the MarkerReached event. Your code can handle this event and use timeline markers to trigger actions. A MediaElement object's Markers property enables you to access the header-embedded markers stored in the currently playing media file. You can also use this property to add new timeline markers.

Although the MediaElement object supports all Windows media technology markers (markers, metadata script commands, and separate-stream script commands), the collection returned from the Markers property does not include any timeline markers encoded as a separate stream in the media file, such as separate-stream script commands. If a file contains both header-embedded script commands and separate-stream script commands, this collection contains only those commands that are embedded in the file header. Separate-stream script commands trigger the MarkerReached event when encountered during media playback. However, these markers cannot be accessed ahead of time by using the Markers property.

MediaElement uses TimelineMarker objects to represent the collection of markers returned by the Markers property. The TimelineMarker object provides the following properties, which describe its time, name, and value:

  • Time: A TimeSpan object that specifies the time when the marker is reached.
  • Type: A string that specifies the marker's type. This value can be any user-defined string.
  • Text: A string that specifies the marker's value. This value can be any user-defined string.

The following example creates a MediaElement and registers for the MarkerReached event. It also creates several TextBlock objects.

XAML 
  <MediaElement x:Name="media" 
    Canvas.Top="50"
    MarkerReached="onMarkerReached" Source="thebutterflyandthebear.wmv"
    Width="300" Height="200" />
      
  
  <Canvas Canvas.Left="10" Canvas.Top="5">
    <TextBlock 
      FontSize="12" Foreground="DarkGray">Time:</TextBlock>    
    <TextBlock x:Name="timeTextBlock"
      Canvas.Left="40"
      FontSize="12" />
    <TextBlock Canvas.Top="12"
      FontSize="12" Foreground="DarkGray">Type:</TextBlock>
    <TextBlock x:Name="typeTextBlock"
      Canvas.Left="40" Canvas.Top="12"
      FontSize="12" />
    <TextBlock 
      Canvas.Top="24"
      FontSize="12" Foreground="DarkGray">Value:</TextBlock>      
    <TextBlock x:Name="valueTextBlock"
      Canvas.Left="40" Canvas.Top="24"
      FontSize="12" />
  
  </Canvas>

The accompanying JavaScript code handles the MarkerReached event. It retrieves the Time, Type, and Text values of the timeline marker that triggered the event and displays that information in the TextBlock objects declared in the preceding markup.

JavaScript 
function onMarkerReached(sender, markerEventArgs)
{
  sender.findName("timeTextBlock").Text =
  	markerEventArgs.marker.time.seconds.toString(); 
  	
  sender.findName("typeTextBlock").Text = 
       markerEventArgs.marker.type;  	
  	
  sender.findName("valueTextBlock").Text = 
       markerEventArgs.marker.text;
  
}

Defining Media Markers

There are two ways to create media markers. The first is to use an editor such as the Windows Media File Editor (installed as part of the Windows Media Encoder 9 installation) or Microsoft Expression Media Encoder to create markers and save them in the media file itself or in a separate stream. The following illustration shows the Windows Media File Editor displaying the script commands (a type of marker) associated with a media file.

Windows Media File Editor

Windows Media File Editor

The second approach is to dynamically generate new TimelineMarker objects and add them to the MediaElement through its Markers property. These timeline markers are temporary and are not saved in the media file. Any such timeline markers you create disappear each time a new media file is loaded by that MediaElement. Note that this approach requires that you use JavaScript to add the TimelineMarker objects, as shown in the following example.

The following example creates a new timeline marker and adds it to the MediaElement whenever a media file is opened.

XAML 
  <MediaElement x:Name="media" 
    Canvas.Top="50"
    MediaOpened="onMediaOpened"
    MarkerReached="onMarkerReached" Source="thebutterflyandthebear.wmv"
    Width="300" Height="200" />
JavaScript 
function onMediaOpened(sender, eventArgs)
{
    var marker = 
         sender.getHost().content.createFromXaml
         (
              '<TimelineMarker Time="0:0:5" Type="Test" Text="New Marker" />'
         );
    sender.markers.add(marker);	
}

See Also

Supported Media Formats and Protocols
MediaElement
Overviews and How-to Topics