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.
      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

13 comments so far

  1. Sean on

    You should add a screen shot at the end to show what you’ve created.

  2. cschuman on

    Great catch! Thanks for the suggestion.

  3. Ben Hayat on

    Thank you for the great work. Much appreciated!

    ..Ben

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

  5. anonymous on

    When can we expect the “Buffering” and “progress” support that you promised?

  6. cschuman on

    The buffering progress post is almost finished. It will be available later tonight.

  7. […] Create a video player in Silverlight 2 – Part 2 […]

  8. kenneth on

    really nice tutorial easy and funny to make:)

  9. kenneth on

    really nice tutorial
    easy and funny to make:)

    thanks🙂

  10. Andreas on

    Thanks for the tutorial, i hope part 3 is coming soon.🙂

  11. SJ on

    it seems the mousedown event and mouseUp event of the scrubberSlider is not firing please resolve it.

  12. Hoang Le Minh on

    Slider MouseLeftButtonDown/Up events bubbling no longer available in Beta 2, so you need to inherit Slider control and write your custom events

    go here for more information

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


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

%d bloggers like this: