Media Element in Silverlight and WPF

by ·1 Comment

Hey guys. Today i am going to discuss about the MediaElement in Silverlight and see how we can put it in use in Silverlight and WPF applications. We can integrate media into our Silverlight pages and WPF UserControls.

 

MediaElement Objects

To add media to the Silverlight page just add a MediaElement to your XAML and provide a URI (Uniform Resource Identifier) to the media to play. The code below will show you how to create a MediaElement and set its Source proprty to URI of a video file. You can add the video file to Visual Studio project also and then set its property to Resource and the MediaElement will begin playing when the page loads.

XAML

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

Note – The MediaElement object can play WMV (Windows Media Video), WMA (Windows Media Audio), MP3 Files.
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.
  • 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.

Controlling Media Playback

You can control media playback by using the Play, Pause, and Stop methods of a MediaElement object.

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.

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.