Accessibility is Key - Sample Project
One of the great requirements of accessibility standards is the ability to control things completely via the keyboard. Not as sexy as creating a 3D video player - but still incredibility important in today's world.
Having the ability to control your video player by the keyboard is a great win and allows you to reach an even wider audience. All this and it's incredibility easy to do using BEML and BC3 Player API. (Even I CAN do it)
Here's one possible solution:
Step 1 - Player Action to Key Stroke to Player API Function Mapping
Start with a key stroke to BC3 Player Action mapping table - maybe something like
Action | Key Stroke | Player API |
---|---|---|
Play / Pause | UP | VideoPlayer.play() / VideoPlayer.pause() |
Stop | DOWN | VideoPlayer.stop() |
Seek Forward (15s) | RIGHT | VideoPlayer.seek(time + 15s) |
Seek Reverse (15s) | LEFT | VideoPlayer.seek(time - 15s) |
At this stage I HIGHLY encourage you to read up on the Player API (specifically around the Video Player API module
Step 2 - Create a BEML Module Component
Now we need to create a custom AS3 component that we can append to our players - in this instance we'll use the BEML interface to allow us to easily include this into our player. I won't get too much into BEML as you can read ALL ABOUT IT HERE - but I will say this: I'll be using the BEML SWFLoader Component - you may think that because there is no UI it should go in the Modules nodes BUT because I need to wire into the Stage object I have to put this into the SWFLoader component.
A quick look on the interweb gave me this AS3 code snippet from Adobe's Help Centre.
Combine that with the BC3 Player API Reference here I created a SWF of only 100 lines! [Code to be available via Dev Centre]
Step 3 - Host the Component and combine with BEML
For this sample I kept things incredibly simple and so just duplicated the out of the box Video Player Template and modified the BEML with the SWF Loader component (with width of 0 and height of 0 so it doesn't throw the layout out of whack).
The BEML looks like this:
And the key ActionScript class that ties the Keyboard to the Player events looks like this:
private function reportKeyDown(event:KeyboardEvent):void
{
//Key to Action Mapping
//Play / Pause UP VideoPlayer.play() / VideoPlayer.pause()
//Stop DOWN VideoPlayer.stop()
//Seek Forward (15s) RIGHT VideoPlayer.seek(time + 15s)
//Seek Reverse (15s) LEFT VideoPlayer.seek(time - 15s)
switch(event.keyCode)
{
case Keyboard.UP:
if (this._bcVideo.isPlaying())
{
this._bcVideo.pause(true);
}
else
{
this._bcVideo.play();
}
break;
case Keyboard.DOWN:
this._bcVideo.stop();
break;
case Keyboard.RIGHT:
this._bcVideo.seek(this._bcVideo.getVideoPosition(false) + 15);
break;
case Keyboard.LEFT:
this._bcVideo.seek(this._bcVideo.getVideoPosition(false) - 15);
break;
}
}
Step 4 - Create a player and publish
MAKE SURE YOU TURN ON THE API FOR THE PLAYER! If you don't none of this works.
Using the quick publish feature in the Media Module I combined a video with my player and voila - see below.
Note you need to click on the player before the keys work. Yes I know that might be redundant so if anyone knows how to pass focus from the hosting page via JS please let me know so I can get this all completed.
Also note sample code needs to be reviewed first and I'll most likely post this all on the Dev Blog.
Total time!? = 45 minutes (60 if you include writing this post!)
The Finished Product
Currently you need to start the video with the mouse - but once started the UP key Play/Pauses, DOWN key Stops, RIGHT key advances by 15s, LEFT key rewinds by 15s