Assistance+1 888 882 1880
Search IconA magnifying glass icon.


By Cameron Church

Technical Channel Director, EMEA at Brightcove


Accessibility is Key - Sample Project

Brightcove News

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

ActionKey StrokePlayer API
Play / / VideoPlayer.pause()
Seek Forward (15s) + 15s)
Seek Reverse (15s) - 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.pause()
            //Stop                   DOWN                        VideoPlayer.stop()
            //Seek Forward (15s)     RIGHT               + 15s)
            //Seek Reverse (15s)     LEFT               - 15s)

                case Keyboard.UP:
                    if (this._bcVideo.isPlaying())
                case Keyboard.DOWN:
                case Keyboard.RIGHT:
           + 15);
                case Keyboard.LEFT:
           - 15);

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

Retour en haut