Calling JavaScript from a BEML Plugin

Written by Bob de Wit. Posted in Brightcove, Developer Blog, Flex

This article will show you how to call an external JavaScript function from a BEML plugin loaded into a Brightcove player. There are two parts to making this work: first, we need to create a BEML plugin, I’ve done this in Flex, and provided the framework for you to integrate any business logic you may want to trigger the JavaScript call by getting the references to the Brightcove Player. The main things to include to call external JavaScript are:
import flash.external.*;
and the bridge to the external JavaScript:
private function onClick():void
{
    var javascriptFunction:String = "showAlert";
    var message:String = "Hello From BEML!";
    if(ExternalInterface.available)
    {
        ExternalInterface.call(javascriptFunction, message);
    }
}
Second, we need to add a JavaScript function for the plugin to call to the embedding HTML page, something like:
<script type="text/javascript">
    function showAlert(message)
    {
        alert(message);
    }
</script>
The full code contains a skeleton for handling loading and setting up the plugin correctly in a Brightcove player:
<![CDATA[
import mx.controls.Alert;
import flash.display.Stage;
import flash.external.*;
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.*;

//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;

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
{
    VideoPlayer = Wrapper.getModule(APIModules.VIDEO_PLAYER) as VideoPlayerModule;
}

private function onClick():void
{
    var javascriptFunction:String = "showAlert";
    var message:String = "Hello From BEML!";

    if(ExternalInterface.available)
    {
        ExternalInterface.call(javascriptFunction, message);
    }
}

]]>

Trackback from your site.

Comments (6)

Leave a comment