Home > Learn > QuickStarts
QUICKSTARTS
[This topic is pre-release documentation and is subject to change in future releases of Microsoft Silverlight.]

media

Silverlight provides a MediaElement object that you can use to play WMV (Windows Media Video) and WMA (Windows Media Audio) files, as well as some types of MP3 files.

This document contains the following sections.

add media to your page

To add media to your files, you create a MediaElement and set its Source property to reference your media source file through a URI path. 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 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 Silverlight plug-in that hosts your content to true and adjust the size of the MediaElement to the ActualWidth and ActualHeight reported by the Silverlight object model.

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 plugin = sender.getHost();
    plugin.content.onfullScreenChange = onFullScreenChanged;
    

}

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

function onFullScreenChanged(sender, args)
{

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

}

[hide] [restart]

painting with video

You can use a VideoBrush to paint shapes and text with video. To use a VideoBrush, follow these steps.

  1. Create a VideoBrush element.
  2. 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 should set the Opacity of the MediaElement to 0.0. If you do not want audio (which might be more common for a video used as a brush), set the IsMuted property of the MediaElement to true.
  3. 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.

Copyright © 2008 Microsoft Corporation. All rights reserved. Legal Notices.