Create a video player in Silverlight 2 - Part 2

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

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.
      Register MouseLeftButtonDown and MouseLeftButtonUp events for the slider
    • 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

Uncategorized

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

Leave a Reply