Using Silverlight to Create a Video Player

Note: This article is submitted by David for Silverlight Contest: Write and Win.Thanks a lot, David! Hello All, Please drop a comment if you like it.

This article is compatible with the latest version of Silverlight.

Silverlight sure has come a long way since the days of “WPF/E.” It has truly proven itself to be one of the best toolsets for Rich Internet Applications, and has effectively achieved its original goal of being an Internet version of WPF. The power and possibilities behind Silverlight are endless.

Source Code: VideoPlayer.zip

Creating the UI

Let’s start out by designing the interface of our video player. To do this, first create a project in Visual Studio called “VideoPlayer” with the Silverlight Application template.

 
Creating a Silverlight Application in Visual Studio 2008

As the project is being created, you will see a prompt asking about a web application to host the Silverlight application. If you don’t have an existing web application to host your Silverlight application in, go ahead and leave the default settings and hit OK, like this:

Web Application Host prompt while creating a Silverlight Application

Once the project is created, the first file you will see is a split designer/code view of Page.xaml. Looking in the code view, note that the root XAML element is <UserControl>, whereas in some earlier Silverlight releases the root element was almost always <Canvas>. You can drag and drop controls into the code view to create our user interface – designer drag-and-drop isn’t supported yet – or you can just copy and paste the following code. We need a MediaElement for hosting our video, and three Buttons (for Play, Pause, and Stop).

<UserControl x:Class="VideoPlayer.Page"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Width="640"
             Height="550">
    <Grid x:Name="LayoutRoot"
          Background="White">
        <Canvas>
            <MediaElement x:Name="mPlayer"
                          Width="640"
                          Height="480"
                          Source="a_video.wmv" />
 
            <Button x:Name="bPlay"
                    Background="Green"
                    Width="100"
                    Height="45"
                    Canvas.Left="8"
                    Canvas.Top="497"
                    Content="Play"
                    Click="bPlay_Click" />
            <Button x:Name="bPause"
                    Background="Yellow"
                    Width="100"
                    Height="45"
                    Canvas.Left="112"
                    Canvas.Top="497"
                    Content="Pause"
                    Click="bPause_Click" />
            <Button x:Name="bStop"
                    Background="Red"
                    Width="100"
                    Height="45"
                    Canvas.Left="216"
                    Canvas.Top="497"
                    Content="Stop"
                    Click="bStop_Click" />
        </Canvas>
    </Grid>
</UserControl>

You will notice a few things here. Firstly, there is the declaration of the root <UserControl> element. I still chose to throw in a <Canvas> element following this, for easily positioning the Buttons. You can see the size of the UserControl is quickly set within two attributes, along with the XAML namespaces references. The first child element after the <Canvas> is the MediaElement. The Source property should be replaced with whatever video you wish to display. Following the MediaElement, there are the three Buttonss which, respectively, are green (Play), yellow (Pause) and red (Stop). This is the general setup for the user interface. If you’d like to make changes or additions, go ahead! There is plenty of room for flexibility here – what about adding a video selection list, or a download feature?

Adding Control

We will continue with the core video player functionality. The video player will have no control with three mere Buttons alone! For this feat, we will need to wire the MouseLeftButtonDown events of these elements to functions in the page’s supporting code file (the defaults is Page.xaml.vb in VB.NET or Page.xaml.cs in C#). In the XAML file, we set the x:Name attributes of all the elements. This will give us access to the elements through code. Open the code file, which should look similar to the following:

'VB.NET
Partial Public Class Page 
    Inherits UserControl
 
    Public Sub New()
        InitializeComponent()
    End Sub
End Class
 
//C#
public partial class Page : UserControl
{
    public Page()
    {
        InitializeComponent();
    }
}

Between the End Sub of the Page_Loaded event handler and the End Class line (or between the last two brackets), add the following event handlers. Each function handles the appropriate MouseLeftButtonDown event for a Button element, and then calls the corresponding method in the MediaElement.

'VB.NET
 
Private Sub bPlay_Click(ByVal sender As System.Object , ByVal e As System.Windows.RoutedEventArgs)
    mPlayer.Stop()
    mPlayer.Play()
End Sub
 
Private Sub bPause_Click(ByVal sender As System.Object , ByVal e As System.Windows.RoutedEventArgs)
    If mPLayer.CurrentState = MediaElementState.Paused Then
        mPlayer.Play()
    Else
        mPlayer.Pause()
    End If
End Sub
 
Private Sub bStop_Click(ByVal sender As System.Object , ByVal e As System.Windows.RoutedEventArgs)
    mPlayer.Stop()
End Sub
 
//C#
 
public void bPlay_Click(object sender, RoutedEventArgs e)
{
    mPlayer.Stop()
    mPlayer.Play()
}
 
public void bPause_Click(object sender, RoutedEventArgs e)
{
    if (mPLayer.CurrentState == MediaElementState.Paused)
    {
        mPlayer.Play();
    }
    else
    {
        mPlayer.Pause();
    }
}
 
public void bStop_Click(object sender, RoutedEventArgs e)
{
    mPlayer.Stop()
}