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.