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.