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.

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

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.

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