External javascript call from Brightcove BEML - brightcove

Question

Is there any way to reference a custom javascript function from BEML? I'd like to keep away from Flash since what ever I do needs to work in the HTML5 player as well.
<Runtime>
<Layout width="800" height="600" id="backgroundTemplate">
<Canvas>
<VideoDisplay id="videoPlayer" width="788" height="487" x="9" y="13"/>
<MediaControls x="5" y="509" width="791" height="87" id="mediaControls">
<VBox>
<Canvas height="25" padding="20">
<Playhead mediaController="{videoPlayer}" autohideSlider="false" useTimeToolTip="true"/>
</Canvas>
<HBox padding="10">
<HBox id="leftBtn_container" hAlign="left">
<ToggleButton id="playButton" width="60" height="60" x="0" y="0" showBack="true" click="{videoPlayer.play()}" toggledClick="{videoPlayer.pause()}" toggled="{videoPlayer.playing}"/>
</HBox>
<HBox id="rightBtn_container" hAlign="right">
<Button width="60" height="60" id="cite_btn" click="{someFunction.doSomething()}"/>
</HBox>
</HBox>
</VBox>
</MediaControls>
</Canvas>
</Layout>
</Runtime>

Answer 1

You would need to create a custom component.Creating Custom Player Components
Call custom component in BEML.
<Modules>
<Module file="http://urltocustomcomponent.com/my_component.swf" />
</Modules>
Button in BEML
<ToggleButton id="my_button" width="40" height="40" />
Actionscript for custom component.
package
{
import com.brightcove.api.APIModules;
import com.brightcove.api.BrightcoveModuleWrapper
import com.brightcove.api.CustomModule;
import com.brightcove.api.modules.ExperienceModule;
import com.brightcove.api.events.BEMLMouseEvent;
import flash.events.Event;
import flash.external.ExternalInterface;
import com.brightcove.api.components.Button;
public class yogaComponent extends CustomModule
{
override protected function initialize():void
{
// Get the experience module
var experienceModule:ExperienceModule = player.getModule(APIModules.EXPERIENCE) as ExperienceModule;
// Define Info Button
var button:Button = experienceModule.getElementByID("my_button") as Button;
// Our listener that calls the function
button.addEventListener(BEMLMouseEvent.CLICK, myCustomFunc);
}
// Custom Function
private function myCustomFunc(event:Event):void
{
if(ExternalInterface.available)
{
// this calls a javascript function in your html
ExternalInterface.call('myJavascriptAlertFunction');
}
}
}
}
Javascript function that is called on event click.
function myJavascriptAlertFunction()
{
alert('it works!');
}