Another unique thing for me today – this time getting the Brightcove media player playing in a CBT that we’re developing. I originally setup the framework for this project and handed it off to other developers to complete but it has come back around to me since incorporating the Brightcove video player turned out to be problematic.

When the project landed back at my desk the video wasnt working and the PM was waiting for the client to send over the Brightcove iFrame code (the client didnt reveal they had a brightcove account until later). The iFrame was easy to setup but the assumption that it was what the project required was wrong – we’re hiding the navigation thereby forcing the end-user to watch the video which means we need to register some sort of “video end” event so that we know when to re-enable the UI. Since the iFrame’s source came from another domain we of course ran afoul of the cross domain policy preventing any interaction with the iFramed contents.

Digging into Brightcove’s docs I saw the “embed” option and started down that path: first, I needed to embed the code, next I needed to register the desired event.

Embed the Video HTML

I didn’t see the Brightcove console but from what the client gave us I could tell that there must be a section that provies sample embed code. You will want that code as it contains the Video ID (UID for the video), Account number (your Brightcove account), and the Player value (tells the Brightcove JS which video tag to use).

  

For my specific implementation the above was kept in an external HTML template file. I then pulled it and updated the necessary values. Once the HTML was ready to be inserted a simple $(‘#my-element-ID’).html(template-code-here) added it to the page.

Note that the video ID should must be inserted into the above for this to work (well, for this particular way of doing things) as it tells the Brightcove JS what video to use. What happens next is that we create a video player instance.

Init the Video

Per the Brightcove docs they create a script element, assign values to various properties and then add it to the page. A few things to note:

  1. We need to know when the Brightcove script has loaded
  2. We need to create a reference to the video player
  3. We need to assign a callback to the video player’s ended event

So with that in mind here’s the function I wrote (note the comments).

...
  var bc = function(accountID,playerID){
    var that = this;
    this.mPlayer = null;
    this.brightcove = {
      accountId : accountID, // your account ID here
      playerId : playerID // your player ID here
    }

    function addBrightCoveScript(){
      // create the element
      var s = document.createElement('script');

      // add the element to the page
      $('#my-wrapper').append(s);

      // set the onload
      s.onload = function(e){

        // the script has loaded, now lets detect the video player instantiation
        videojs('mPlayer').ready(function(){

          // cool, we know that the video player exists, lets get a reference to it
          that.mPlayer = videojs('mPlayer');

          // using the reference lets add a listener, in this case we are listening for the "ended" event
          that.mPlayer.one('ended',function(e){
            // the video has ended - do something here  
          });
        });
      };

    // now update the script tag
    s.src = '//players.brightcove.net/' + that.brightcove.accountId + '/' + that.brightcove.playerId + '_default/index.min.js';
  }
...

You will see what appears to be a typo: that.mplayer.one. The “one” is not a typo, per the Brightcove API registering an event with the “one” method will result in the listener detecting the event a single time. When that happens the listener removes itself thereby relieving me of the burden of doing it myself.

Following the above you should be good to go for modern HTML5-capable browsers.