Create a video player in Silverlight 2 – Part 1

Creating a video player in Silverlight is pretty simple. The MediaElement does all the heavy lifting, all you need to do is wire up a UI and you have a basic Video player. Here is a tutorial on how to create a simple video player from scratch using Silverlight 2.

  1. Create a Silverlight application
  2. Add a video to the project. This is for testing purposes only. Later in part 2 we will use a streaming video.
  3. Add a MediaElement and a Toggle button for Play/Pause of the video.XAML
    XAML Play Pause toggle button

    C#
    C# Play Pause Toggle button

  4. Add a Slider to show the position of the video. To show the progress of the video on the slider, we will need to create a DispatcherTimer. On the Tick event we will update the value of the slider. In this example I have set the value of the Tick to 50 milliseconds. There is minor jumping; if you want to get seamless indicator movment try going under 41 milliseconds. We also need to Start and Stop the timer. I am doing this on CurrentStateChanged event of the MediaElement.XAML
    XAML slider

    C#
    C# Scrubber

  5. Add a TextBlock to show the exact position of the video. To update the text, I am adding this to the Tick event of the timer.XAML
    XAML Video position text

    C#
    C# Video position text

  6. Screen shot of the player at the end of Part 1
    Part 1 screen shot

Links
Source (11Mb because of the WMV)
Part 2 of how to Create a video player in Silverlight 2

UPDATE

If you are having problems with the Slider not recoginzing MouseLeftButtonUp or MouseLeftButtonDown events, check out the VideoSlider

About these ads

10 comments so far

  1. [...] Create a Video Player in Silverlight 2 – Part 1 (Corey Schuman) [...]

  2. [...] a video player Silverlight 2 – Part 2 Posted April 15, 2008 In part 1 we covered setting up a very basic video player. In part 2 we will [...]

  3. Richard on

    A nice clean simple example. Thanks. I must try this out.
    Very few major sites seem to be using Silverlight though, must stick with Flash, one of the few I’ve seen is ITV.com

  4. [...] Create a video player in Silverlight 2 – Part 1 [...]

  5. [...] Create a video player in Silverlight 2 – Part 1 [...]

  6. Stephen Price on

    I have problems with this when I try to load the wmv file without a path. When I add the full url to the filename on the Source property then it works. (ie Source = “http://localhost:53018/bear.wmv”)

    How did you get it to load the file from the filesystem? I got a weird error:
    sys.invalidoperationexception: mediaerror error #1001 in control ‘Xaml1′ AG_E_Unknown_error

    Thanks for the walkthrough!
    cheers,
    stephen

  7. cschuman on

    Hey Stephen,

    Are you trying to set the Source from C#? If so you will need to use the Uri object. Try something like mediaElement.Source = new Uri(“http://localhost:53018/bear.wmv”, UriKind.Absolute);

  8. Beneton on

    Why the hell there is not a ProgressEvent????
    We have DownloadProgressChange event AND BufferingProgressChange event but NO VideoProgressChange event!

    WTF!?
    dummy silverlight…

  9. Mino on

    Hi Stephen

    This tutorial is fantastic.
    I’ve developed a Video Player:

    http://www.silverlight-blog.it/ontheroad/videoplayer/index.html

    Mino

  10. Eugene on

    Don’t forget to set build action “Resource” while adding video file to the project…


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: