Thursday, April 24, 2008

Controlling video with dragging

To control video with dragging might sound a bit strange and useless but keep on reading and you'll see the the possibilities this creates.

For a project I'm working on, I wanted to create a rotating 3D image which the user van control with his mouse using dragging.
This kind of displaying is often used for displaying objects like cars:
or purses?
or other products:

Getting started

First I created a UserControl and added 2 properties:

  1. "AutoPlay" which plays the video once when loaded

  2. "MovieSource" which contains the Uri of the videofile

  3. "StretchMovie" which contains the Uri of the videofile

To be on the safe side I created a public method "Release" to stop the dragmode. If by some reason the mouse stays in dragmode it can be stopped by calling the Release method:

Custom MouseCursor

For a better drag experience a "custom" mousecursor is added when hovering over the control and when dragging.

To achieve this, add an image ("_cursor" in the code snippet below) to the page which you can position when the mousemove event is triggered. With this.Cursor = Cursors.None you can make sure the default cursor is no longer visible.

Controlling the video

In the eventhandler of the mousemove event, first check if the user is dragging:

If so, set the movieposition to the correct value:

The call to the UpdateVideoPlayer method makes sure the movie gets rendered on the right frame:

Click here to view the demo

Click here to download the source

One issue I experience (could be my laptop) is that it's a shocky. It's not rotating fluently. In Mediaplayer Classic it works fine, so I think it's a rendering issue with SL2. If someone has any ideas about this, please let me know!

That's it for now. I'm leaving to Spain tomorrow for a two week holiday, so no more for at least two weeks! :)

No comments:

Post a Comment