This screen shot shows a slow-motion control incorporated into a Brightcove Player using BEML.
The full code is listed below.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" showEffect="{FadeIn}" layout="absolute" backgroundColor="#888888" backgroundAlpha="0" backgroundGradientAlphas="[0, 0]" backgroundGradientColors="[#000000, #000000]" width="110" height="24" xmlns:local="*">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.display.Stage;
import com.brightcove.api.*;
import com.brightcove.api.components.*;
import com.brightcove.api.dtos.*;
import com.brightcove.api.events.*;
import com.brightcove.api.modules.*;
import com.brightcove.api.search.*;
import com.brightcove.api.utils.*;
private var timer:Timer = new Timer(10);
//Placeholder for BC Player Reference
private var Wrapper:BrightcoveModuleWrapper = null;
//Placeholder for VideoPlayer Reference
private var VideoPlayer:VideoPlayerModule = null;
//Placeholder for Experience Reference
private var Experience:ExperienceModule = null;
private var isFullScreen:Boolean = false;
public function setInterface(player:IEventDispatcher):void
{
//Save the passed BC player Object reference
Wrapper = new BrightcoveModuleWrapper(player);
Experience = Wrapper.getModule(APIModules.EXPERIENCE) as ExperienceModule;
if (Experience == null)
{
Wrapper.addEventListener(ExperienceEvent.MODULES_LOADED, onModulesLoaded);
Wrapper.loadModules();
}
else
{
checkReady();
}
}
private function onModulesLoaded(event:ExperienceEvent):void
{
Wrapper.removeEventListener(ExperienceEvent.MODULES_LOADED, onModulesLoaded);
Experience = Wrapper.getModule(APIModules.EXPERIENCE) as ExperienceModule;
if (Experience != null)
{
checkReady();
}
}
private function checkReady():void
{
if (Experience.getReady())
{
InitApp();
}
else
{
Experience.addEventListener(ExperienceEvent.TEMPLATE_READY, onTemplateReady);
}
}
private function onTemplateReady(event:ExperienceEvent):void
{
Experience.removeEventListener(ExperienceEvent.TEMPLATE_READY, onTemplateReady);
InitApp();
}
private function InitApp():void
{
timer.addEventListener(TimerEvent.TIMER, onTimer);
VideoPlayer = Wrapper.getModule(APIModules.VIDEO_PLAYER) as VideoPlayerModule;
//Add a listener for full screen switching
Experience.addEventListener(ExperienceEvent.ENTER_FULLSCREEN, onEnterFullScreen);
Experience.addEventListener(ExperienceEvent.EXIT_FULLSCREEN, onExitFullScreen);
//Add a listener for a video being loaded
VideoPlayer.addEventListener(MediaEvent.PROGRESS, onMediaProgress);
VideoPlayer.addEventListener(MediaEvent.CHANGE, onMediaChange)
}
private function onEnterFullScreen(evt:Object):void
{
isFullScreen = true;
}
private function onExitFullScreen(evt:Object):void
{
isFullScreen = false;
}
private function onMediaChange(evt:Object):void
{
}
private function onSlomoChange():void
{
if( slomo.value > 0 )
{
VideoPlayer.setVolume(0);
}
else
{
VideoPlayer.setVolume(1);
}
}
//Handler for videoLoad events from the content module
private function onMediaProgress(evt:MediaEvent):void
{
var time : Number = evt.position;
if( slomo.value > 0 )
{
timer.delay = slomo.value;
VideoPlayer.pause(true);
timer.start();
}
}
private function onTimer(e:Event):void
{
timer.stop();
VideoPlayer.pause(false);
}
private function onMouseOver():void
{
}
private function onPlayClick():void
{
if( ! VideoPlayer.isPlaying() )
{
VideoPlayer.play();
}
else
{
VideoPlayer.pause(true);
}
}
]]>
</mx:Script>
<mx:Fade id="FadeIn" alphaFrom="0" alphaTo="1" duration="500"/>
<mx:Canvas width="100%" height="100%" cornerRadius="8" borderStyle="solid" backgroundColor="#474747">
<mx:HSlider x="25" y="1" minimum="0" maximum="100" width="80" id="slomo" change="onSlomoChange()"/>
<mx:Label x="6" y="3" text=">" color="#FFFFFF" fontWeight="bold" id="PlayButton" fontSize="12" click="onPlayClick()"/>
</mx:Canvas>
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" showEffect="{FadeIn}" layout="absolute" backgroundColor="#888888" backgroundAlpha="0" backgroundGradientAlphas="[0, 0]" backgroundGradientColors="[#000000, #000000]" width="110" height="24" xmlns:local="*">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.display.Stage;
import com.brightcove.api.*;
import com.brightcove.api.components.*;
import com.brightcove.api.dtos.*;
import com.brightcove.api.events.*;
import com.brightcove.api.modules.*;
import com.brightcove.api.search.*;
import com.brightcove.api.utils.*;
private var timer:Timer = new Timer(10);
//Placeholder for BC Player Reference
private var Wrapper:BrightcoveModuleWrapper = null;
//Placeholder for VideoPlayer Reference
private var VideoPlayer:VideoPlayerModule = null;
//Placeholder for Experience Reference
private var Experience:ExperienceModule = null;
private var isFullScreen:Boolean = false;
public function setInterface(player:IEventDispatcher):void
{
//Save the passed BC player Object reference
Wrapper = new BrightcoveModuleWrapper(player);
Experience = Wrapper.getModule(APIModules.EXPERIENCE) as ExperienceModule;
if (Experience == null)
{
Wrapper.addEventListener(ExperienceEvent.MODULES_LOADED, onModulesLoaded);
Wrapper.loadModules();
}
else
{
checkReady();
}
}
private function onModulesLoaded(event:ExperienceEvent):void
{
Wrapper.removeEventListener(ExperienceEvent.MODULES_LOADED, onModulesLoaded);
Experience = Wrapper.getModule(APIModules.EXPERIENCE) as ExperienceModule;
if (Experience != null)
{
checkReady();
}
}
private function checkReady():void
{
if (Experience.getReady())
{
InitApp();
}
else
{
Experience.addEventListener(ExperienceEvent.TEMPLATE_READY, onTemplateReady);
}
}
private function onTemplateReady(event:ExperienceEvent):void
{
Experience.removeEventListener(ExperienceEvent.TEMPLATE_READY, onTemplateReady);
InitApp();
}
private function InitApp():void
{
timer.addEventListener(TimerEvent.TIMER, onTimer);
VideoPlayer = Wrapper.getModule(APIModules.VIDEO_PLAYER) as VideoPlayerModule;
//Add a listener for full screen switching
Experience.addEventListener(ExperienceEvent.ENTER_FULLSCREEN, onEnterFullScreen);
Experience.addEventListener(ExperienceEvent.EXIT_FULLSCREEN, onExitFullScreen);
//Add a listener for a video being loaded
VideoPlayer.addEventListener(MediaEvent.PROGRESS, onMediaProgress);
VideoPlayer.addEventListener(MediaEvent.CHANGE, onMediaChange)
}
private function onEnterFullScreen(evt:Object):void
{
isFullScreen = true;
}
private function onExitFullScreen(evt:Object):void
{
isFullScreen = false;
}
private function onMediaChange(evt:Object):void
{
}
private function onSlomoChange():void
{
if( slomo.value > 0 )
{
VideoPlayer.setVolume(0);
}
else
{
VideoPlayer.setVolume(1);
}
}
//Handler for videoLoad events from the content module
private function onMediaProgress(evt:MediaEvent):void
{
var time : Number = evt.position;
if( slomo.value > 0 )
{
timer.delay = slomo.value;
VideoPlayer.pause(true);
timer.start();
}
}
private function onTimer(e:Event):void
{
timer.stop();
VideoPlayer.pause(false);
}
private function onMouseOver():void
{
}
private function onPlayClick():void
{
if( ! VideoPlayer.isPlaying() )
{
VideoPlayer.play();
}
else
{
VideoPlayer.pause(true);
}
}
]]>
</mx:Script>
<mx:Fade id="FadeIn" alphaFrom="0" alphaTo="1" duration="500"/>
<mx:Canvas width="100%" height="100%" cornerRadius="8" borderStyle="solid" backgroundColor="#474747">
<mx:HSlider x="25" y="1" minimum="0" maximum="100" width="80" id="slomo" change="onSlomoChange()"/>
<mx:Label x="6" y="3" text=">" color="#FFFFFF" fontWeight="bold" id="PlayButton" fontSize="12" click="onPlayClick()"/>
</mx:Canvas>
</mx:Application>
very very Good article. Thanks a lot…