Create a video player in Silverlight 2 – Part 2

In part 1 we covered setting up a very basic video player. In part 2 we will add

• Scrubbing the video
• wiring up volume,
• and muting.

In future versions I will show how to display a buffer message, skin the controls, and how to work with media that’s not embedded in the xap.

1. Scrubbing
   • Add a MouseLeftButtonDown and MouseLeftButtonUp events for the slider in the constructor.
     
     
   • Add a property to lock the scrubber while the mouse button is down.
     
   • In the MouseLeftButtonDown event, set the scrubber lock to true.
     
   • In the MouseLeftButtonUp event, release the lock on the scrubber and update the position of the video.
     
   • Finally in the Tick event of the timer, prevent updating the position of the slider while the scrubber is locked.
     
2. Volume
   • XAML. It important to set the Min to 0 and the Max to 1. The MediaElements volume ranges from 0 to 1.
     
   • Register the ValueChanged event in the constructor for the slider.
     
   • Set the video’s volume to the value in the ValueChanged event.
     
   • Set the initial position of the slider to the video’s volume. You can either do this in the CurrentStateChanged event or the MediaOpened event of the MediaElement.
     
3. Mute button
   • XAML, add a ToggleButton
     
   • Register the Checked and UnChecked events in the constuctor for the mute button.
     
     
   • Add a variable to store the previous volume.
     
     
   • Checked event
     
     
   • UnChecked event
     
4. Resulting player
   

Files:
Instead of the whole project (because the video is embedded in the project), here are the two important pieces of this project

XAML

C#

UPDATE

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

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
   

   C#
   

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
   

   C#
   

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
   

   C#
   

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

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

Why won’t media play in Silverlight 2?

The Media Element handles errors pretty gracefully. The errors that do occur are usually related to cross domain problem and setting the Source from managed code.

If you are experiencing errors, make sure to take a look at the address bar. If the site is being run from the local file system and you are trying to access media from http or https there will be an error.