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
Posted by raghunt 
FLEXing My Muscle 