Play Video in Silverlight

Silverlight MediaElement Control

The MediaElement control is used to display and play videos in Silverlight. This article demonstrates how to use a MediaElement control in Silverlight to play videos with the help of XAML and C#.  

MediaElement

MediaElement element represents a MediaElement in XAML. The Source property of the MediaElement specifies name of the media file to be played. This property can be an absolute URL or a relative URL.

The following code snippet sets the Source property to a .wmv file.

<MediaElement Source="="/Wildlife.wmv" />

The following XAML code snippet creates a MediaElement, sets Source to a movie, and also sets Width, Height, Name, and Alignment of the MediaElement.

<MediaElement Height="238" HorizontalAlignment="Left" Margin="12,12,0,0" Name="mediaElement1" VerticalAlignment="Top" Width="424" Source="/Wildlife.wmv" />

 

Play, Pause and Stop

The MediaElement class in Silverlight represents a MediaElemnet control. The Play, Pause, and Stop methods of the MediaElement class play, pause, and stop a video respectively.

How about creating a simple video player looks like following.

Create a Silverlight project using Visual Studio 2010 or Expression Blend 4 and place a MediaElement and three Button controls on the page and name them mediaElement1, PlayButton, PauseButton, and StopButton respectively.

XAML code for the page looks like following.

<Grid x:Name="LayoutRoot" Background="White" Width="460" Height="360">

    <MediaElement Height="238" HorizontalAlignment="Left" Margin="12,12,0,0" Name="mediaElement1"

                    VerticalAlignment="Top" Width="424" Source="/Wildlife.wmv" />

    <Button Content="Play" Height="28" HorizontalAlignment="Left" Margin="12,258,0,0"

       Name="PlayButton" VerticalAlignment="Top" Width="88" Click="PlayButton_Click" />

    <Button Content="Pause" Height="30" HorizontalAlignment="Left" Margin="120,258,0,0"

              Name="PauseButto" VerticalAlignment="Top" Width="85" Click="PauseButto_Click" />

    <Button Content="Stop" Height="30" HorizontalAlignment="Right" Margin="0,258,156,0"

       Name="StopButton" VerticalAlignment="Top" Width="84" Click="StopButton_Click" />

</Grid>

 

Now on MainPage constructor, I set AutoPlay property to true and call Play, Pause, and Stop methods of MediaElement on their respective Button click event handlers.

C# code:

public MainPage()

{

    InitializeComponent();

 

    mediaElement1.AutoPlay = true;

}

 

private void PlayButton_Click(object sender, RoutedEventArgs e)

{

    mediaElement1.Play();

}

 

private void PauseButto_Click(object sender, RoutedEventArgs e)

{

    mediaElement1.Pause();

}

 

private void StopButton_Click(object sender, RoutedEventArgs e)

{

    mediaElement1.Stop();

}

 

VB.NET code:

    Public Sub New()

        InitializeComponent()

        mediaElement1.AutoPlay = True

    End Sub

 

    Private Sub PlayButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)

        mediaElement1.Play()

    End Sub

 

    Private Sub PauseButto_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)

        mediaElement1.Pause()

    End Sub

 

    Private Sub StopButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)

        mediaElement1.Stop()

    End Sub

 

Summary

In this article, I discussed how we can create a video player in Silverlight using the MediaElement control.