Delaying Player Instantiation

Product(s)
Video Cloud
Brightcove Player
Role(s)
Player Developer
Task(s)
Create & Configure Players
Topic(s)
Playback

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

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"
  class="video-js" 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> 

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>