Create a video player in Silverlight 2 - Part 1

Posted by Corey on April 2, 2008 at 3:37 am.

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

Uncategorized

23 Responses to “Create a video player in Silverlight 2 - Part 1”

Leave a Reply