PageDown, PageUp seek in VideoDisplay

I read somewhere that it would be cool to have the Flex VideoDisplay do a forward & reverse seek when the user presses PageDown and PageUp keys respectively. I just tried it and it was simple to get this to work, but not without learning something new 🙂

I first put an addEventListener on application complete on the VideoDisplay…

vd.addEventListener(KeyboardEvent.KEY_DOWN, kbListener);

But it didnt work.

The problem is that inherently, no containers by itself is focusEnabled in Flex. So the listener on Video doesn’t work as there is no focus on it (even with focusEnabled property set to true).

I worked around it by putting the listener on the application. Though the application is also a container, focusing on any of its children (that are focusEnabled, like Button, TextInput… etc) bubbles the keyboard event to the application and eventually triggers the listener. So when I altered my applicationComplete code to

this.addEventListener(KeyboardEvent.KEY_DOWN, kbListener);

it trigerred the listener that checks for the pageUp, pageDown keys and calls for the updation of the playheadTime property on VideoDisplay.

private function kbListener(event:KeyboardEvent):void{
var num:Number = Number(ti.text);
if(event.keyCode == Keyboard.PAGE_DOWN){
movePlayhead(num);
}
else if(event.keyCode == Keyboard.PAGE_UP){
movePlayhead(num*-1);
}
}

private function movePlayhead(num:Number):void{
if(vd.playheadTime+num >0){vd.playheadTime += num;}
}

This works… but its not a perfect solution. The problem here is that even if the pageUp & down are intended for some other purpose in the application (like for an Accordion), still the video will skip forward.

Finally thanks to Srini, i found a solution. The trick is to make VideoDisplay focusable, which is achieved by implementing the IFocusManagerComponent Interface by extending the VideoDisplay Class. So I have MyVideoDisplay which looks like this

package
{
import mx.controls.VideoDisplay;
import mx.managers.IFocusManagerComponent;
public class MyVideoDisplay extends VideoDisplay implements IFocusManagerComponent
{

}
}

And then use

<MyVideoDisplay width=”400″ height=”300″ id=”vd” source=”video1.flv” />

instead of

<mx:VideoDisplay width=”400″ height=”300″ id=”vd” source=”video1.flv” />

and revert to applying the eventListener on the VideoDisplay and Hola… Everything falls in place…

Now only if you click on the Video and then press pageDown/Up does it work. Also, now the Video appears in the tab loop of the application too. The code & app is here

Advertisements

2 Responses to PageDown, PageUp seek in VideoDisplay

  1. Josh says:

    Very nice, tried that and it worked.

    I had a canvas that was not detecting keystrokes until I applied your suggestion.

  2. Victor says:

    There is one problem. Setting playheadTime does not work correct for stream video. Because if moves playhed to the nearest keyframe with offset that your are setting. You can read it on adobe livedocs:
    “Setting this property to a value in seconds performs a seek operation. ….. Setting this property has no effect with live video streams.”
    I faced that problem when try to (re-) wind to exact time of movie.

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