Using bc() and getPlayer() Methods

Introduction

A basic requirement when doing development with Brightcove Player is obtaining a reference to the player. The best practice for performing this has changed over the life of Brightcove Player 6.x. Here are best practices you should follow (details for each bullet are later in this document):

• To get a reference to the player when using a version of the <video> tag, do one the following:
  • v6.16.0+ use the videojs.getPlayer() method.
  • Before v6.16.0 use the videojs() method.
• When using the Advanced (in-page embed) player implementation, the best practice is:
  • v6.11.0+ use the <video-js> tag.
  • Before v6.11.0 use the <video> tag.
• If you are manually instantiating the player on the page, use the bc() method, which will generate a reference to the player.

getPlayer() versus videojs()

If you have been doing development with Brightcove Player for any length of time, you almost assuredly have seen code similar to the following used to get a reference to the player and store it in the myPlayer variable:

  videojs('myPlayerID').ready(function(){
    var myPlayer = this;
  });

If you are using v6.16.0+ it is a cleaner use of the API, and a recommended best practice, to use player.getPlayer() instead, as shown here:

  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
  });
  

video-js tag versus video tag

For Brightcove Player v6.11.0+ it is a best practice to use <video-js> over <video>. The reasons for this are:

• Using <video-js> will prevent the flash of native controls problem you can get with a <video> element. An example of this is in Chrome versions 67+. Chrome will display a broken video icon momentarily until the <video> tag gets converted into a Brightcove Player. The icon appears as follows:

  

• In some cases, such as when using non-Video Cloud media, using <video-js> will give the player more control over the initialization process. This prevents any automatic browser behaviors that may be associated with the <video> element.

bc() method details

The bc() method is used to instantiate a player at a time of your choosing. The Delaying Player Instantiation document discusses use cases and implementations. The Brightcove Player Sample: Vertical Volume Control shows another use of the bc() method where you want to change the direction of the volume control to vertical, which must occur before the player is instantiated.

The syntax of the method is:

  bc(id,options)

where:

• id:
  • Description: Video element or video element ID
  • Datatype: string|Element
  • Required: true
• options:
  • Description: Options object for providing settings
  • Datatype: Object
  • Required: false
• The method returns a Brightcove Player instance

For example, you could have the following video-js tag and then JavaScript to configure the player:

  <video-js id="myPlayerID"
     data-embed="default"
     data-application-id=""
     controls=""
     width="640" height="360"></video-js>
  <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
  
  <script type="text/javascript">
    // +++ Define the player options +++
    var options = {
      controlBar: {
        volumePanel: {
          inline: false,
          vertical: true
        }
      }
    };
  
    // +++ Add the player attributes +++
    var myPlayerEl = document.getElementById("myPlayerID");
    myPlayerEl.setAttribute('data-account', 1752604059001);
    myPlayerEl.setAttribute('data-player', 'default');
    myPlayerEl.setAttribute('data-video-id', 5557662144001);
  
    // +++ Create the player +++
    bc(myPlayerEl, options);
  </script>

Of the normal player configuration options (detailed in the Player Configuration Guide), the following can be used with the bc() method: