I received a comment on a past post I did in April looking at creating a custom BEML component that allowed a player to be controlled via the keyboard. A big step needed to get towards a universally accessible player.
Chris kindly pointed out that although my component worked in IE it failed miserably in other browsers like Firefox. So I opened up the code and did some repairs and modifications.
Below you can see the player and you should be able to control it using the arrow keys:
- UP - Play/Pause the video
- DOWN - Stop the video (and send it back to the beginning)
- LEFT - Seek back 15 seconds
- Right - Seek forward 15 seconds
I've also tackled the issue of how to give focus to the player without the need to click using the mouse first. To do this I used the Javascript API to listen for the player to finish loading and then give it focus - I added this to the end of my publishing code and it looks like this:
<script type="text/javascript">
function onTemplateLoaded() {
document.myExperience25657367001.focus();
}
</script>
So now on page load you should be able to operate the player immediately by pressing the up arrow on your keyboard!
Some other areas I improved was to use our new Player SWC and created an AS3 class that extends our CustomModule base class. This just made life that much easier when needing to reference the underlying Player API.
Finally I changed my original KeyUpPress event handler to use the actual numeric keyCode values instead of using the AS3 enums which didn't seem to work in CS4 when trying to compile.
Finally instead of using the BEML to reference the SWF I used the new Plugin dialog box via the BC3 Publishing Studio Player Settings feature - alot less messy.
So Chris there you go - let me know if this works better!
Full source code list for the AS3 script:
package {
import com.brightcove.api.APIModules;
import com.brightcove.api.CustomModule;
import com.brightcove.api.events.*;
import com.brightcove.api.modules.*;
import flash.display.Stage;
import flash.system.Security;
import flash.events.*;
public class BC3AccessibilityPlugin extends CustomModule {
private var _bcExperience:ExperienceModule;
private var _bcVideo:VideoPlayerModule;
private var _bcStage:Stage;
public function BC3AccessibilityPlug() {
}
/****** SECTION START: Some setup house keeping ****/
/*
* The player is ready for interaction. Checks for access to stage.
*/
override protected function initialize():void {
_bcExperience = player.getModule(APIModules.EXPERIENCE) as ExperienceModule;
_bcStage = _bcExperience.getStage();
if (_bcStage == null) {
_bcExperience.addEventListener(ExperienceEvent.ADDED_TO_STAGE, onAddedToStage);
} else {
registerEvents();
}
}
private function onAddedToStage(event:ExperienceEvent):void {
_bcExperience.removeEventListener(ExperienceEvent.ADDED_TO_STAGE, onAddedToStage);
registerEvents();
}
/****** SECTION END: Some setup house keeping ****/
/****** SECTION START: BC3 API Event Management ****/
/**
* Register for all interesting events here.
*/
private function registerEvents():void {
_bcStage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);
_bcVideo = player.getModule(APIModules.VIDEO_PLAYER) as VideoPlayerModule;
}
private function keyUpHandler(event:KeyboardEvent) {
//Key to Action Mapping
//Play / Pause UP - code 38 VideoPlayer.play() / VideoPlayer.pause()
//Stop DOWN - code 40 VideoPlayer.stop()
//Seek Forward (15s) RIGHT - code 39 VideoPlayer.seek(time + 15s)
//Seek Reverse (15s) LEFT - code 37 VideoPlayer.seek(time - 15s)
trace("TEST: Key released - code = " + event.keyCode);
switch(event.keyCode)
{
case 38:
if (_bcVideo.isPlaying())
{
_bcVideo.pause(true);
}
else
{
_bcVideo.play();
}
break;
case 40:
_bcVideo.stop();
break;
case 39:
_bcVideo.seek(Number(_bcVideo.getVideoPosition(false)) + 15);
break;
case 37:
_bcVideo.seek(Number(_bcVideo.getVideoPosition(false)) - 15);
break;
}
}
/****** SECTION END: BC3 API Event Management ****/
}
}