Silverlight includes support to play audio and video files. This QuickStart describes how to integrate media into your Web pages.

This QuickStart contains the following sections:

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. Note, if you add the video file to VisualStudio project, be sure to set the property of the video item as a Resource. The MediaElement begins playing when the page loads.

XAML

<StackPanel Width="300" Height="300">

  <MediaElement x:Name="media" Source="xbox.wmv" 
                Width="300" Height="300" />

</StackPanel>

MediaElement Properties

The MediaElement object provides several media-specific properties. The following list describes the commonly used 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. The following illustration shows Stretch value examples.
• 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 the MediaElement properties, see the MediaElement reference page in the Silverlight documentation on MSDN.

Controlling Media Playback

You can 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. To try this example, click the buttons to control the media playback.

XAML

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <MediaElement x:Name="media" Source="xbox.wmv" Width="300" Height="300" 
                  Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" />

    <!-- Stops media playback.-->
    <Button Click="StopMedia" 
     Grid.Column="0" Grid.Row="1" Content="Stop" />

    <!-- Pauses media playback. -->
    <Button Click="PauseMedia" 
     Grid.Column="1" Grid.Row="1" Content="Pause" />

    <!-- Begins media playback. -->
    <Button Click="PlayMedia" 
     Grid.Column="2" Grid.Row="1" Content="Play" />

</Grid>

C#

private void StopMedia(object sender, RoutedEventArgs e)
{
    media.Stop();
}
private void PauseMedia(object sender, RoutedEventArgs e)
{
    media.Pause();
}
private void PlayMedia(object sender, RoutedEventArgs e)
{
    media.Play();
}

Visual Basic

Private Sub StopMedia(ByVal sender As Object, ByVal e As RoutedEventArgs)
    media.Stop()
End Sub

Private Sub PauseMedia(ByVal sender As Object, ByVal e As RoutedEventArgs)
    media.Pause()
End Sub

Private Sub PlayMedia(ByVal sender As Object, ByVal e As RoutedEventArgs)
    media.Play()
End Sub

Video Player Sample with Code

The following example illustrates typical features of a video player including playback control, a progress/seek slider, and full screen toggling.

• Run this sample
• Download this sample

Smooth Streaming

Smooth Streaming is an IIS (Internet Information Services) technology that enables adaptive streaming over HTTP to Silverlight clients. Smooth Streaming breaks video feeds into small fragments which enables it to quickly alter the quality of the video, depending on the current bandwidth of the client. This creates a high-quality viewing experience that scales massively on content distribution networks. For more information on Smooth Streaming, see the IIS Smoothing Streaming site.

For an indepth example of Smooth Streaming, see the Microsoft Silverlight Media Framework CodePlex project.

See Also

• Audio and Video Overview
• Supported Media Formats, Protocols, and Log Fields
• MediaElement States
• Server Side Playlists
• Digital Rights Management (DRM)