Let's see what the publishing code looks like for Brightcove players. First, get the code:
Use the Brightcove Studio Publishing module to create and customize your player. Then grab the publishing code and paste it in your application. The Publishing module creates ActionScript 3.0 players, rather than the ActionScript 2.0 players that were created in the Brightcove Console. You can choose from these forms of publishing code: JavaScript for HTML applications, ActionScript for Flash applications, HTML embed code for websites that have restrictions on Flash objects, and a direct URL to the player hosted on Brightcove.
With the release of Brightcove 3, we changed the player publishing code from the code used with our 2.0 player templates. The new publishing code makes it easier to configure in your application.
Here's the new JavaScript publishing code that you insert into your HTML pages:
<!-- Start of Brightcove Player --> <!-- By use of this code snippet, I agree to the Brightcove Publisher T and C found at http://corp.brightcove.com/legal/terms_publisher.cfm. --> <script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script> <object id="myPlayer" class="BrightcoveExperience"> <param name="bgcolor" value="#FFFFFF" /> <param name="width" value="486" /> <param name="height" value="412" /> <param name="playerID" value="1315753393" /> <param name="isVid" value="true" /> </object> <!-- End of Brightcove Player -->
You can see the lines of JavaScript code have now been replaced by a new DOM object of class BrightcoveExperience to which you assign the startup parameters. This cleaner code reduces the chances for error when configuring your player in your app.
Once you have the publishing code, place it in your application. The steps are different depending on the publishing code you're using.
For HTML applications, paste the JavaScript code in between the <body> tags in your page. This step alone is sufficient for simply getting the player to load and appear in your HTML app. Save your page with an .html extension and load it in your browser to see the player appear.
Here's an example of the ActionScript publishing code:
// By use of this code snippet, I agree to the Brightcove Publisher T&C
// found at http://corp.brightcove.com/legal/terms_publisher.cfm.
/*
* To use this class to load your Brightcove player instance, save this code into the root
* directory of your project as BrightcovePlayer.as. Then, within your application, you can
* instantiate this playerusing the following syntax:
*
* var player:BrightcovePlayer = new BrightcovePlayer();
* addChild(player); /// must be added to a display object container, such as a Sprite instance
*
*/
package {
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.net.URLRequest;
import flash.system.ApplicationDomain;
import flash.system.LoaderContext;
import flash.system.SecurityDomain;
import flash.system.Security;
public class BrightcovePlayer extends Sprite {
private var bcPlayer:Object;
public function BrightcovePlayer() {
init();
}
private function init():void {
var config:Object = new Object();
// change the playerID to load a different player
config["playerID"] = 1315753393;
config["width"] = 486;
config["height"] = 412;
Security.allowDomain("http://admin.brightcove.com");
createPlayer(config);
}
private function onPlayerLoadInit(pEvent:Event):void {
var pLoaderInfo:LoaderInfo = pEvent.target as LoaderInfo;
var pLoader:Loader = pLoaderInfo.loader;
var pPlayer:Sprite = pLoaderInfo.content as Sprite;
if (bcPlayer && pPlayer != bcPlayer) {
if (bcPlayer.parent) {
bcPlayer.parent.removeChild(bcPlayer);
}
}
bcPlayer = pPlayer;
addChild(bcPlayer as Sprite);
if (contains(pLoader)) removeChild(pLoader);
}
private function onPlayerLoadProgress(pEvent:ProgressEvent):void {
// place preload feedback here for shell movie
}
private function createPlayer(config:Object):void {
var servicesURL:String = "http://services.brightcove.com/services";
var cdnURL:String = "http://admin.brightcove.com";
var configItems:String = "";
for (var i:String in config) {
if (i == "flashID" || i == "width" || i == "height") continue;
configItems += "&" + i + "=" + escape(config[i]);
}
var file:String = servicesURL + "/viewer/federated_f9/" +
config["playerID"] + "?isVid=1" +
"&flashID="+escape(config["flashID"])+
"&cdnURL="+escape(cdnURL)+
"&servicesURL="+escape(servicesURL)+
"&playerWidth="+escape(config["width"])+
"&playerHeight="+escape(config["height"])+
configItems;
var player:Loader = new Loader();
addChild(player);
player.contentLoaderInfo.addEventListener(Event.INIT, onPlayerLoadInit);
player.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,
onPlayerLoadProgress);
var context:LoaderContext = new LoaderContext();
context.applicationDomain = ApplicationDomain.currentDomain;
player.load(new URLRequest(file), context);
}
public function onTemplateLoaded():void {
dispatchEvent(new Event("templateLoaded"));
}
public function getModule(pModule:String):Object {
return Object(bcPlayer).getModule(pModule);
}
}
}
For Flash applications, save the ActionScript publishing code in the class path of your application as BrightcovePlayer.as. The .as file needs to be in your class path in order for Flash to find it at compile-time. The easiest way to ensure this is to save it in the same directory as your FLA.
Next, within your FLA, you need to instantiate a new BrightcovePlayer instance, like so:
var p:BrightcovePlayer = new BrightcovePlayer(); addChild(p);
If you're not familiar with ActionScript 3, there are many getting started resources on Adobe's Developer Center. It's considerably different from ActionScript 2 and it's important that you understand the new concepts it introduces before you master these new player experiences.
Go ahead and preview! Be sure to save your FLA before previewing and make sure that the BrightcovePlayer.as file is in the same directory; otherwise, you'll get errors that the class cannot be found.
Read more about how to use the Player API to customize your new player with Flash or HTML.