Embedding Brightcove Players in Flex 3

This article describes how to embed a Brightcove player into a Flex 3 application. As you will see, there are some minor but important extra steps to take compared to doing this in Flash CS3. Working with Adobe Flex Builder 3 is assumed, but this code can be compiled with the open source SDK as well.

Step One: Preparing a Flex Project

We'll start with a new Flex project. For this example, we'll be embedding the Brightcove Player into a Flex custom component. The advantage of this is that you can reuse this component in other Flex projects.

We'll be adding two items to the empty Flex project:

• Create a new ActionScript file named BrightcovePlayer.as (which will contain the Brightcove player publishing code generated by the Brightcove Studio Publishing module).
• Create a new MXML component, derived from Canvas, named BrightcovePlayerContainer.mxml.

Step Two: Get the Publishing Code

This step is identical to Flash CS3 integration: grab the ActionScript code to embed a player from the Brightcove Studio Publishing module, copy it to your clipboard, and paste it into the BrightcovePlayer.as file you created in Step One.

The publishing code defines an ActionScript class that needs to be placed in an external ActionScript file, and imported into your project. With the class imported, you can create a new Brightcove player and add event listeners.

Step Three: Creating the Custom Component

Now add the following code to your custom BrightcovePlayerContainer component:

<mx:Script>
  <![CDATA[
    import mx.core.UIComponent;
    import flash.system.Security;
 
    public var player:BrightcovePlayer;
    public var mPlayer:Object;
    public var mContent:Object;
    public var mExp:Object;
 
    private function onCreationComplete() : void
    {
      Security.allowDomain("*");
 
      player = new BrightcovePlayer();
      player.addEventListener("templateLoaded", templateLoaded);
 
      var ref : UIComponent = new UIComponent();
      addChild( ref );
      ref.addChild( player );
    }		
 
    private function templateLoaded(evt:Event):void
    {
       trace ("template Load");
       mPlayer = player.getModule("videoPlayer");
       mContent = player.getModule("content");
       mExp = player.getModule("experience");
    }
  ]]>
</mx:Script>

To ensure the onCreationComplete() function is called properly, set it as the creationComplete event handler for the custom component. Assuming this component is based on Canvas, this might look as follows:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="onCreationComplete()">

Let's go over the parts, shall we?

The component is based on a Flex Canvas and calls the onCreationComplete() function when being created.

The BrightcovePlayer.as file is already part of the project so we do not need to import it. We are however importing two other libraries:

import mx.core.UIComponent;
import flash.system.Security;

The UIComponent library will be used to embed the dynamically created Brightcove Player into our custom component, as shown here:

player = new BrightcovePlayer();
. . .
var ref : UIComponent = new UIComponent();
addChild( ref );
ref.addChild( player );

To avoid security error messages during testing, we add this line:

Security.allowDomain("*");

To obtain references to the Brightcove Player components, we add an event listener for template load completion:

player.addEventListener("templateLoaded", templateLoaded);

and the corresponding event handler function:

private function templateLoaded(evt:Event):void {
   mPlayer = player.getModule("videoPlayer");
   mContent = player.getModule("content");
   mExp = player.getModule("experience");
}

Step Four: Adjusting the HTML Code

Before compiling and running the code, you may want to change the HTML template of the Flex Project's index.template.html file. This file controls what the Flex SWF file can and cannot do through the SWF environment parameters. The suggested adjustments are:

• Set allowScriptAccess to always, at least for testing. This will prevent sandbox violation error messages.
• Add allowFullScreen with a value of true for your Brightcove player to be able to switch to Full Screen mode.