I think Brightcove is a great service. I’ve been building videoplayers using their API for the past months and I must say it’s super sweet. The API take a while to get your head around but once you do you can do a lot, even if you are just using their own markup-language BEML (Brightcove Experience Markup Language).

But this is’nt a post about how great Brightcove is. I know by experience that you can find a lot of stuff on the internet but not that many tutorials about Brightcoveplayers and that is a problem if you are just getting started and need a push in the right direction.

Before I start.

I do assume that you have used the Brightcove Studio, you know how to create playertemplates using BEML and know some basic ActionScript 3.

Some background.

The client I’ve done most of my Brightcoveprojects for wanted a chromeless player with nothing more than a mutebutton. They didn’t want to use the default controllers so I needed to write a custom plugin. Doing so is pretty straight forward but if you know a thing or two about the Player API you might understand how things work a little more.

It all began in… the template

The first thing you need to do is download the API SWC from Brightcove.

Then you need to create a playertemplate inside the Brightcove studio. The player on which I based this tutorial got no controls beside the ”play”-button that appear when you click on the moviearea.

A Brightcove plugins is nothing more than a SWF that you tell the template to import using the SWFLoader. So in the template we add a VideoPlayer-object and a SWFLoader-object. Since we use a VideoPlayer-object we can’t add a playlist to the player and therefore we don’t need to tell it which playlist or video to play since it will get that ID thru the embedcode. Moving on to the SWFLoader. The most important thing is the source, here you tell the template from where you want to load the plugin. Then set the X and Y-position of the plugin to what ever you want.

And that is pretty much all we have to do inside the Brightcove Studio. The last thing you need to do is to create the player itself and enable the ”Enable ActionScript/JavaScript APIs”-option otherwise you will bash your head bloody against the screen since nothing you do will work.

<Runtime>
<Layout style="background-color:#000000" width="600" height="200">
<VideoDisplay id="videoPlayer"/>
<SWFLoader depth="2" y="10" x="10" source="YOUR_DOMAIN_URL_HERE/swfname.swf"/>
</Layout>
</Runtime>

The plugin

When I code I use FlashDevelop or Flex Builder. As long as the IDE you use can import SWC-files your safe, if not i suggest you download the free IDE FlashDevelop and the Flex SDK.

Fire up your IDE and create a new project. The only thing that matters is that you use AS3. Now include the Player API SWC in the project and we can start to write some code. *jay* You can read more about SWCs here and how to include them into your FlashDevelop-project here.

When I write plugins I do it in two different ways. The first one is to hook the VideoPlayer-module yourself. That requires you to write a lot of extra code but saves you a few kb in the end and gives you more control. The other way is to let your mainclass extend the CostumeModule. The CostumModule-class will take care of all the API-stuff at the cost of a few extra kb but in the end it will save you some work. It’s all comes down to if you want to re-invent the wheel or not.

Since I wanted the mutebutton to have an on and off-state I created two MovieClips with the classname ”muteOn” and ”muteOff” in Flash, exported the graphics as a SWC and included it in my FlashDevelop-project.

We begin by importing everything we need. The Sprite and MouseEvent are standard AS3-stuff so nothing new there so we move on to the three Brightcove-classes. APIModules, CustomModule and VideoPlayerModule. If you want more in depth knowledge about what they do just follow the links. Now we create all the stuff we want to use. The only thing that might be new is the datatype for the _playerModule, VideoPlayerModule. This will allow us to use all the stuff the videoplayer can, like mute, but before we can do that we must link _playerModule and the actual videoplayer together. We do that by overriding the initialize-function in the CostumModule-class, or at least I think it’s in that class. But it works.

In the Main-function we set up the graphics and the mouseevent. The variable muted is just to keep track of whether the player is muted or not. You might be able to ask the videoplayer if it’s muted or not, it’s not pretty but for this plugin I think this solution does the job.

When the user click the button the MouseEvent will call the mute-function and set the visibility for both icons to false and then let the if-statement check whether the player is muted. If not, the visibility of ”muteOnGfx” is set to true and the mute-function within the videoplayer-object fires. When we call the mute-function we have to pass a booelan parameter, True if we want the sound off and false if we want it on. And that is it. Mute away now kids!

The code in one piece

package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import com.brightcove.api.APIModules;
import com.brightcove.api.CustomModule;
import com.brightcove.api.modules.VideoPlayerModule;

public class Main extends CustomModule{
private var button:Sprite = new Sprite();
private var _playerModule:VideoPlayerModule;
private var muted:Boolean = false;
private var muteOnGfx:muteOn = new muteOn();
private var muteOffGfx:muteOff = new muteOff();

override protected function initialize():void {
_playerModule = player.getModule(APIModules.VIDEO_PLAYER) as VideoPlayerModule;
}

public function Main():void {
button.addChild(muteOnGfx);
button.addChild(muteOffGfx);

if (muted == false) {
muteOnGfx.visible = false;
}else {
muteOffGfx.visible = false;
}

button.buttonMode = true;
addChild(button);

button.addEventListener(MouseEvent.CLICK, mute);
}

private function mute(e:MouseEvent):void {
muteOnGfx.visible = false;
muteOffGfx.visible = false;

if (muted == false) {
_playerModule.mute(true);
muteOnGfx.visible = true;
muted = true;
}else {
_playerModule.mute(false);
muteOffGfx.visible = true;
muted = false;
}
}
}
}

Conclusion

This plugin could of course be modified to control almost everything like play-, pause-, stopbuttons etc. But this is a start and I plan to write some more tutorials about how to make the Brightcoveplayer do what you want. The first step is the hardest, right?