Using Silverlight to Create a Video Player: By David 6

Note: This article is submitted by David for Silverlight 2 Beta 2 – Articles Competition.Thanks a lot, David! Hello All, Please drop a comment if you like it.

Contents

  • Using Silverlight to Create a Video Player
  • Prerequisites
  • Creating the UI
  • Adding Control

Source Code : VideoPlayer.zip (560KB)

Using Silverlight to Create a Video Player

Silverlight sure has come a long way since the days of “WPF/E.”  With its most recent release, Silverlight 2 Beta 2, 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.  However, with the continuous stream of alpha and beta releases, there are many breaking changes that appear.  Newcomers to Silverlight and developers upgrading to the newest versions may have trouble learning all the ropes of the new 2 Beta 2 version.  In this article I will present a simple yet expandable scenario that will help new and existing Silverlight developers enhance their development experience.

Prerequisites

In order to use the features talked about in this article, there are just a few things you’ll need to download (or ensure you already have).  Firstly, you need to have a version of Visual Studio 2008 (I will be using the Professional edition and will assume that is the version you have, too – other versions may work, however).  Next, you will need the Silverlight Tools Beta 2 (which includes Visual Studio Silverlight support and the Silverlight SDK), which is available at MS Download.  Finally, you will need Silverlight 2 Beta 2, downloadable at the official Silverlight website.  Once all this is taken care of, proceed to the next section!

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="http://www.example.com/video.wmv"/>

<Button x:Name="bPlay" Background="Green" Width="100" Height="45" Canvas.Left="8" Canvas.Top="497" Content="Play"/>
<Button x:Name="bPause" Background="Yellow" Width="100" Height="45" Canvas.Left="112" Canvas.Top="497" Content="Pause"/>
<Button x:Name="bStop" Background="Red" Width="100" Height="45" Canvas.Left="216" Canvas.Top="497" Content="Stop"/>

</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
Public Sub Play_Click(ByVal sender As Object, ByVal e As EventArgs) Handles bPlay.MouseLeftButtonDown
mPlayer.Play()
End Sub

Public Sub Pause_Click(ByVal sender As Object, ByVal e As EventArgs) Handles bPause.MouseLeftButtonDown
mPlayer.Pause()
End Sub

Public Sub Stop_Click(ByVal sender As Object, ByVal e As EventArgs) Handles bStop.MouseLeftButtonDown
mPlayer.Stop()
End Sub


//C#
public void Play_Click(object sender, EventArgs e)
{
mPlayer.Play();
}

public void Pause_Click(object sender, EventArgs e)
{
mPlayer.Pause();
}

public void Stop_Click(object sender, EventArgs e)
{
mPlayer.Stop();
}

Note that in C#, you will have to go back to the XAML file and set the MouseLeftButtonDown attributes of each Button to the appropriate function name, as C# doesn’t have a Handles keyword.  After typing all this, you should be able to compile the application and test it out!  The video player should now work properly.  The task of creating a fully functional video player is easily accomplished with Silverlight.  Even in the time from the first few Alpha releases of it, we have seen Silverlight burst into popularity and power.  Although the video player presented here seems to be a basic example, it does in fact cover all of the basic Silverlight techniques: creating a Silverlight application, using VS 2008 for designing in Silverlight, and the .NET Silverlight event handling system. Silverlight is a really useful new technology from Microsoft – one that is revolutionizing the way people use and develop the web as you read this.  Now it’s up to you: what will you be inspired to create with this astounding new technology?  Get out there, start coding, and have fun!

David

6 thoughts on “Using Silverlight to Create a Video Player: By David

  1. Reply Art Scott Jul 9,2008 9:53 am

    Thanks.
    Your article is an exemplary example.

  2. Pingback: Post: 138 - Mirrored Blogs

  3. Reply unruledboy Jul 9,2008 8:06 pm

    off the topic:

    why the font in silver light is always blurry especially when clear type is enabled. but, even I disabled smotth border setting in system, it still blurs. any solution to make it as sharp as other text in normal win apps?

  4. Reply Tom Jul 10,2008 7:21 am

    @unruledboy: This is a “feature” of WPF carried over into SL. It’s the #1 bug for WPF on Microsoft Connect:
    https://connect.microsoft.com/feedback/ViewFeedback.aspx?FeedbackID=281780&SiteID=212
    I raised the issue with members of the graphics teams for WPF and SL last month at TechEd. Message I got from WPF: “we know, we’re working on it for post-SP1″. Message I got from SL: “it’s not important enough, we need to hear more complaints about it”.

  5. Reply unruledboy Jul 10,2008 6:45 pm

    @Tom

    it seems that it’s a well-known “bug” yet the team not really wish to fix it right away :(

    I complained it at the link you provided, hope it helps

  6. Reply mindy Dec 11,2009 6:33 pm

    Personally i think this is a good post. I’ll be sure to come back for more..
    Also, i have bookmark your site!

    Mindy

Leave a Reply