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:

<Runtime>
    <Theme name="Deluxe" style="Light" />
    <Layout>
        <SWFLoader width="0" height="0" source="http://mysite/bc3keycontrol_v1.swf" />
        <VBox padding="3">
            <VideoPlayer id="videoPlayer" />
        </VBox>
    </Layout>
</Runtime>

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

Posted in category: ,   Comments (2),   Tags: