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.

MediaElementImg1.jpg

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.


Similar Articles
Mindcracker
Founded in 2003, Mindcracker is the authority in custom software development and innovation. We put best practices into action. We deliver solutions based on consumer and industry analysis.