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:
http://www.autotropolis.com/car.review/2008/Ford/Mustang/exterior.htm
or purses?
http://www.cheathamlane.net/index.php?section=projects
or other products:
http://www.pioneer.fr/nl/black/products/kuro2007/360_PDP_508XD.html
Getting started
First I created a UserControl and added 2 properties:
- "AutoPlay" which plays the video once when loaded
- "MovieSource" which contains the Uri of the videofile
- "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! :)
Posts
No comments:
Post a Comment