We've done a couple of player components that create custom overlays over a VideoDisplay. Here's how:
In the BEML, we place both the SWFLoader and VideoDisplay in a Canvas so that the SWFLoader sits directly above the VideoDisplay:
<Canvas>
<VideoDisplay id="videoPlayer" showBack="true" includeFullscreenControls="true"/>
<SWFLoader source="[PATH TO SWF]" depth="2"/>
</Canvas>
Then, in ActionScript, we create a Sprite overlay, and figure out the dimensions of the overlay using the videoPlayerModule.getWidth() and .getHeight() methods:
var _width:Number = videoPlayerModule.getWidth();
var _height:Number = videoPlayerModule.getHeight();
Then we draw the overlay Sprite as a transparent rectangle over the entire area:
this.graphics.beginFill(0x000000, 0.0);
this.graphics.drawRect(0, 0, _width, _height);
this.graphics.endFill();
Now you can add event listeners to your overlay Sprite, as well as add children to it, such as custom player controls.
overlay.addEventListener(MouseEvent.CLICK, handleClick);
//etc.
The trick then is that this overlay will cover the default Brightcove overlay that appears either when you pause or open a menu, which is a problem. So, you have do a couple of things:
1. Remove the overlay any time the player is paused, a menu is open, or the player is in full-screen mode, and add it again whenever it returns to a normal playing state. These are the listeners to use:
videoPlayerModule.addEventListener(MediaEvent.BEGIN, handleMediaPlay);
videoPlayerModule.addEventListener(MediaEvent.PLAY, handleMediaPlay);
videoPlayerModule.addEventListener(MediaEvent.STOP, handleMediaStop);
menuModule.addEventListener(MenuEvent.MENU_PAGE_OPEN, handleMenuPageOpen);
menuModule.addEventListener(MenuEvent.MENU_PAGE_CLOSE, handleMenuPageClose);
experienceModule.addEventListener(ExperienceEvent.ENTER_FULLSCREEN, handleEnterFullScreen);
experienceModule.addEventListener(ExperienceEvent.EXIT_FULLSCREEN, handleExitFullScreen);
Each handler function needs to either add or remove the overlay, depending on the state of the player, which requires a bit of logic that you'll have to figure out.
2. Make sure that you also listen for clicks on the overlay to toggle playback on the player, presuming you want to preserve the default Brightcove player interface.
private function handleClick(event:MouseEvent):void {
videoPlayerModule.pause(videoPlayerModule.isPlaying());
// Anything else you want to happen...
}
After that, it's really up you what you do with it! As was mentioned earlier, creating your own media controls from scratch can be tedious because of all the events involved, but it's certainly possible. Or you could use the rollover event to make a BEML MediaControls element appear.
