media

Silverlight provides a MediaElement object that you can use to play WMV (Windows Media Video) and WMA (Windows Media Audio) files.

This document contains the following sections.

add media to your page
useful MediaElement properties
interactively controlling media playback
full-screen media playback
painting with video
what's next?

add media to your page

To add media to your files, you create a MediaElement and set its Source property to point to your media file. The following is an example.

[hide XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
  <MediaElement 
    Source="thebutterflyandthebear.wmv" Width="300" Height="300" />
</Canvas>

[hide] [restart]

Like other UIElement objects, you can put drawings on top of MediaElement objects. The following example adds an Ellipse in front of the MediaElement from the previous example.

[hide XAML]

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
  <MediaElement Source="thebutterflyandthebear.wmv" Width="300" Height="300" />
  
  <Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"
     Stroke="Black" StrokeThickness="10" Fill="SlateBlue"
     Opacity="0.6" />
</Canvas>

[hide] [restart]

useful MediaElement properties

In addition to the properties MediaElement gets for being a UIElement, such as Opacity and Clip, MediaElement provides several media-specific properties:

Stretch: Specifies how video is stretched to fill the MediaElement. Possible values are None, Uniform, UniformToFill, and Fill. The default is Fill. For more information about the Stretch property, see the Silverlight SDK.
IsMuted: Specifies whether the MediaElement is muted. A value of True mutes the MediaElement. The default value is False.
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.

See the Silverlight SDK for additional MediaElement properties.

interactively controlling media playback

You can interactively control media playback by using the play, pause, and stop methods. The following example uses the play, pause, and stop methods to interactively control media playback.

[hide XAML]

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

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

[hide 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();
}

[hide] [restart]

full-screen media playback

For full-screen media playback, set the FullScreen property of the control that hosts your content to True and adjust the size of the MediaElement to the ActualWidth and ActualHeight reported by the control.

The following example adds full-screen playback to the interactive controls defined in the preceding example.

[hide XAML]

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Loaded="canvas_loaded">
    
  <MediaElement x:Name="media" 
     Source="thebutterflyandthebear.wmv" 
     Width="300" Height="300" />

  <Canvas x:Name="buttonPanel">
  
    <!-- 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>
  
    <!-- Switches to full screen mode. -->
    <Canvas MouseLeftButtonDown="toggle_fullScreen" 
      Canvas.Left="190" Canvas.Top="265">
      <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
         Height="30" Width="85">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25">
            <GradientStop Color="Gray" Offset="0.0" />
            <GradientStop Color="Black" Offset="1.0" />        
          </RadialGradientBrush>
        </Rectangle.Fill>
      </Rectangle>
      <TextBlock Canvas.Left="5" Canvas.Top="5"
        Foreground="White" >full screen</TextBlock> 
    </Canvas>  
  
  </Canvas>
     
</Canvas>

[hide 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();
}


function canvas_loaded(sender, args)
{
  
    var control = sender.getHost();
    control.content.onfullScreenChange = "onFullScreenChanged";
    

}

function toggle_fullScreen(sender, args)
{
    var silverlightControl = sender.getHost();
    silverlightControl.content.fullScreen = !silverlightControl.content.fullScreen;  
   
}

function onFullScreenChanged(sender, args)
{

  
    var silverlightControl = sender.getHost();
    var buttonPanel = sender.findName("buttonPanel");
    
    if (silverlightControl.content.fullScreen == true)
    {
      buttonPanel.opacity = 0;
    }
    else 
    {
      buttonPanel.opacity = 1;
    }
    
    var mediaPlayer = sender.findName("media");
    mediaPlayer.width = silverlightControl.content.actualWidth;
    mediaPlayer.height = silverlightControl.content.actualHeight;
     

}

[hide] [restart]

painting with video

You can use a VideoBrush to paint shapes and text with video. To use a VideoBrush, you complete the following steps.

Create a VideoBrush element.
Create a MediaElement and assign it a name. The MediaElement processes the video stream for the VideoBrush. Unless you want to see two copies of the video, you'll should set the Opacity of the MediaElement to 0.0. If you don't want audio, set the IsMuted property of the MediaElement to True.
Set the SourceName property of the VideoBrush to the name of the MediaElement you just created.

The following example uses a VideoBrush to paint the Foreground of a TextBlock.

[hide XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
  <MediaElement x:Name="myMediaElement" 
    Source="thebutterflyandthebear.wmv" 
    Width="300" Height="300"
    Opacity="0" IsMuted="True" />  
  
  <TextBlock Canvas.Left="10" Canvas.Top="10"
    FontFamily="Verdana"
    FontSize="80" FontWeight="Bold">Watch<LineBreak/>This
    <TextBlock.Foreground>
      <VideoBrush SourceName="myMediaElement" />
    </TextBlock.Foreground>
  </TextBlock>
  
</Canvas>

[hide] [restart]

Stopping, pausing, or playing the MediaElement affects the associated VideoBrush, but changing the size or opacity of the MediaElement does not. The same MediaElement can be used by multiple VideoBrush objects.

what's next

The next topic, animations, describes how to animate Silverlight objects.