I wanted a smart way for users with tablets or mobiles to be able to seek parts of a movie without buttons.
So swipe gesture and mouseMove came to mind. In this code the user can swipe towards the right to move forward into the movie or towards left to go back. Note:Of course this will not work with a live stream. I just thought I should mention it.
Concider that you have build a very simple player with video display.
<s:VideoDisplay width="100%" height="100%" autoPlay="true" id="player" scaleMode="stretch" mediaPlayerStateChange="checkState(event)"/>
Now lets initialize and bind our events:
protected function init():void
{
navigator.landscapeOrientation = false;
if (!Multitouch.supportsTouchEvents)
{
addEventListener(MouseEvent.MOUSE_DOWN,onTouchMove);
systemManager.stage.addEventListener(MouseEvent.MOUSE_MOVE,onTouchMove);
}
else
{
label.text = "normal";
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
addEventListener(TouchEvent.TOUCH_MOVE,onTouchMove);
}
player.source = "http://myMovie.mp4";
}
This will show u when the player is playing and has calculated the max duration.
public function checkState(evt:MediaPlayerStateChangeEvent)
{
if(evt.state == "playing")
{
trace(String(player.duration));
}
trace(String((player.duration/60))+" "+evt.state);
}
Now lets create that function that does all the work:
private function onTouchMove(event):void
{
if(event.stageX>systemManager.stage.width/2)
{
var time = event.stageX/100;
time = player.currentTime+time;
player.seek(Math.round(time));
trace(player.currentTime+"::"+event.stageX+"::"+Math.round(time));
}
else if(event.stageX<systemManager.stage.width/2)
{
var time = event.stageX/100;
time = player.currentTime-time;
player.seek(Math.round(time));
trace(player.currentTime+"::"+event.stageX+"::"+Math.round(time));
}
}
In a 1024x600 10'' screen with max swipe the movie will move forward or backward 10'' with each swipe.
I tend to believe that its pretty cool, personally I would also add arrows to show which way the user swipes.
+