Delaying Player Instantiation

In this topic, you will learn how to delay instantiation of Brightcove Player when an HTML page is browsed. Use cases where this technique is helpful are, for example, lightbox styles and single page web apps where the page with the player is not initially instantiated.

Delay instantiation

There are a few use cases where you will want to use the Advanced (in-page embed) player implementation code, but delay player instantiation. To do this, you have to alter the <videos-js> tag's attributes and use the bc() method to initialize the player. Note that the method can take either the player ID or the player element itself as an argument.

Modify video-js tag

Note: If you are a Brightcove Player customer, you will not use the data-video-id attribute to assign a video to your player. You would either assign the video in the Players module, use curl or the src method (which is used in this document).

When delaying player instantiation, you CANNOT use all the <video-js> tag's attributes, or the player will be instantiated. You must remove three of the attributes from the standard Advanced (in-page embed) code. The attributes that need to be removed are:

data-account
data-player
data-video-id

This leaves the following attributes in the <video-js> tag:

data-embed
class
controls (optional)

The reason the attributes must be removed as any of those three attributes remain it will cause Brightcove Player to be instantiated.

The Advanced code used should be patterned on the following code snippet. Note that an id is added to the tag.

<video-js id="myPlayerID"
  data-embed="default"
  controls=""></video-js>
<script src="https://players.brightcove.net/1507807800001/5e28670f-28ce-4ed6-8809-227784965834_default/index.min.js"></script>

These changes to the Advanced code and JavaScript code shown below work together to delay the instantiation of the player.

JavaScript used

A very common practice is to use code similar to the following to prepare to programmatically interact with the player:

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

This approach cannot be used as it would instantiate the player. Instead, you will use the bc() method to instantiate the player AFTER other preferences have been set. This bc() method is used to create a new instance of Brightcove Player and is normally automatically called when using the <video-js> tag, unless the steps detailed here are followed.

Lines 2-3: Declare a variable for the player, and get the video-js element.
Lines 4-5: Use the JavaScript setAttribute() method to set the data-account and data-player. This is important for tracking analytics and other services.
Line 6: Uses the JavaScript setAttribute() method to set the video ID.
Line 9: Uses the bc() method to initialize the player.
Lines 12-15: Programmatically plays the video. Waiting for the loadedmetadata event to dispatch ensures the video has been retrieved by the catalog before it tries to play.

<script type="text/javascript">
  var myPlayer,
    vTag = document.getElementById('myPlayerID');
  vTag.setAttribute('data-account', 1507807800001);
  vTag.setAttribute('data-player', 'BdGVdOd36');
  vTag.setAttribute('data-video-id', 2114345470001);

  // Use the bc() method to initialize the Brightcove Player
  myPlayer = bc(vTag);

  // Mute (in case there is an audio track, in which case play won't work) and play the video
  myPlayer.on('loadedmetadata',function(){
    myPlayer.muted(true);
    myPlayer.play();
  });
</script>

Lines 2-3: Declare a variable for the player, and get the video-js element.
Lines 4-5: Use the JavaScript setAttribute() method to set the data-account and data-player. This is important for tracking analytics and other services.
Line 8: Uses the bc() method to initialize the player.
Line 10: Sets the src for the player. It is very important to set both the src and type for the source object. Problems can occur in some browsers if the first option in playback technology order does not match the video's type.
Line 13: Programmatically plays the video. Of course, this is not required.

<script type="text/javascript">
  var myPlayer,
    vTag = document.getElementById('myPlayerID');
  vTag.setAttribute('data-account', 1507807800001);
  vTag.setAttribute('data-player', 'BdGVdOd36');

  // Use the bc() method to initialize the Brightcove Player
  myPlayer = bc(vTag);

  myPlayer.src({ src: "//solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8", type: "application/x-mpegURL"});
  // Mute (in case there is an audio track, in which case play won't work) and play the video
  myPlayer.muted(true);
  myPlayer.play();
</script>

Alternatively, if you are comfortable addressing elements directly by ID you can use this more concise code:

<script type="text/javascript">
  var myPlayer;
  myPlayerID.setAttribute('data-account', 1507807800001);
  myPlayerID.setAttribute('data-player', 'BdGVdOd36');
  myPlayerID.setAttribute('data-video-id', 2114345470001);

  // Use the bc() method to initialize the Brightcove Player
  myPlayer = bc('myPlayerID');

  // Mute (in case there is an audio track, in which case play won't work) and play the video
  myPlayer.on('loadedmetadata',function(){
    myPlayer.muted(true);
    myPlayer.play();
  });
</script>

No `id` on the player

If for some reason you do not wish to use an id with your player, you can use the following code to delay instantiation.

Lines 3-4: Declare a variable for the player, and get the video-js element.
Lines 7-8: Use the JavaScript setAttribute() method to set the data-account and data-player. This is important for tracking analytics and other services.
Line 9: Uses the JavaScript setAttribute() method to set the video ID.
Line 12: Uses the bc() method to initialize the player.
Lines 15-18: Programmatically plays the video. Waiting for the loadedmetadata event to dispatch ensures the video has been retrieved by the catalog before it tries to play.

<script type="text/javascript">
  // Retrieve the element by tag name, returns an array so use the zeroth array element
  var myPlayer,
    vTag = document.getElementsByTagName('video-js')[0];

  // Assign the needed attributes
  vTag.setAttribute('data-account', 1507807800001);
  vTag.setAttribute('data-player', 'BdGVdOd36');
  vTag.setAttribute('data-video-id', 2114345470001);

  // Use the bc() method to initialize the Brightcove Player
  myPlayer = bc(vTag);

  // Mute (in case there is an audio track, in which case play won't work) and play the video
  myPlayer.on('loadedmetadata',function(){
    myPlayer.muted(true);
    myPlayer.play();
  });
</script>

Lines 3-4: Declare a variable for the player, and get the video-js element.
Lines 7-8: Use the JavaScript setAttribute() method to set the data-account and data-player. This is important for tracking analytics and other services.
Line 11: Uses the bc() method to initialize the player.
Line 13: Sets the src for the player. It is very important to set both the src and type for the source object. Problems can occur in some browsers if the first option in playback technology order does not match the video's type.
Line 16: Programmatically plays the video. Of course, this is not required.

<script type="text/javascript">
  // Retrieve the element by tag name, returns an array so use the zeroth array element
  var myPlayer,
    vTag = document.getElementsByTagName('video-js')[0];

  // Assign the needed attributes
  vTag.setAttribute('data-account', 1507807800001);
  vTag.setAttribute('data-player', 'BdGVdOd36');

  // Use the bc() method to initialize the Brightcove Player
  myPlayer = bc('vTag');

  myPlayer.src({ src: "//solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8", type: "application/x-mpegURL"});
  // Mute (in case there is an audio track, in which case play won't work) and play the video
  myPlayer.muted(true);
  myPlayer.play();
</script>

CSAI with SSAI ad failover

With ad failover turned on, the Brightcove Player detects if an ad blocker is present in the browser. If not, your client-side ads (CSAI) are played. If an ad blocker is detected, then the player automatically requests your server-side ads (SSAI). For details, see the SSAI: Ad Block Detection and Auto-Failover document.

By default, calling the bc() method forces the player to initialize immediately. If you want to use ad failover with the bc() method, you need to wait for the player to check if an ad blocker is present. You can do this with the following code:

bc.usingAdBlocker().then(function() {
  // The promise callback receives a true/false result, which is stored
  // internally, so future bc() calls will use it. There is no need to
  // handle it yourself.
  //
  // You can pass custom arguments to bc, as normal, if needed.
  bc();
});

Example

Here is some example code.

HTML

This is the HTML for the example.

<video-js id="myPlayerID"
	data-embed="default"
	data-application-id=""	
	controls=""
	width="640"
	height="360"></video-js>
<script src="//players.brightcove.net/1752604059001/W6RmT8TVL_default/index.min.js"></script>

JavaScript

This is the JavaScript for the example.

<script type="text/javascript">
  // +++ Define the player options +++
  var options = {
    controlBar: {
      volumePanel: {
        inline: false,
        vertical: true
      }
    }
  };

  // +++ Add the player attributes +++
  var myPlayer,
		myPlayerEl = document.getElementById("myPlayerID");
  myPlayerEl.setAttribute('data-account', 1752604059001);
  myPlayerEl.setAttribute('data-player', 'W6RmT8TVL');
  myPlayerEl.setAttribute('data-video-id', 5802784116001);

  // +++ Create the player +++
  bc.usingAdBlocker().then(function() {
    myPlayer = bc(myPlayerEl, options);

    // +++ Optionally, mute and start playback +++
    myPlayer.on('loadedmetadata',function(){
      myPlayer.muted(true);
      myPlayer.play();
    });
  });
</script>

Delaying Player Instantiation

Delay instantiation

Modify video-js tag

JavaScript used

No id on the player

CSAI with SSAI ad failover

Example

HTML

JavaScript

No `id` on the player