RequireJS and Brightcove Player

In this topic, you will learn how to use RequireJS, a JavaScript file and module loader, with Brightcove Player. RequireJS assists in managing dependencies when using multiple JavaScript scripts. Since Brightcove Player has its own script per player, the index.min.js file, this document provides the code to use Brightcove Player in a RequireJS implementation.

Instantiate Brightcove Player

The following code details implementing Brightcove Player when utilizing RequireJS. Three key points:

  1. The code insures that the player gets initialized before the callback gets called.
  2. The use of the on() and play() methods (lines 36-38) are only for demonstration purposes, and not required for the use of the player. Those three lines of code only indicate where you could begin using Brightcove Player's API.
  3. The highlighted code pertains to Brightcove Player.
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js {
      height: 344px;
      width: 610px;
    }
  </style>
</head>

<body>

  <video-js id="myPlayerID"
    data-video-id="4690057979001"
    data-account="1507807800001"
    data-player="default"
    data-embed="default"
    controls></video-js>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.js"></script>
  <script>
    require.config({
      'paths': {
        'bc': 'https://players.brightcove.net/1507807800001/default_default/index.min'
      },
      waitSeconds: 30
    });

    require(['bc'], function() {
      var myPlayer = videojs.getPlayers().myPlayerID;
      myPlayer.on('loadstart', function(){
        myPlayer.play();
      })
    });
  </script>

</body>

</html>

Using an anonymous module

As you have seen in the code shown above, when using RequireJS with the Brightcove Player v6.x a module named bc is created. The approach recommended by RequireJS is to provide an anonymous AMD module, which makes including multiple Brightcove Players significantly easier. You can make the module anonymous by default. Brightcove highly recommends you make a player configuration change to opt-in to this default, and at the same time the change will remove the console warning from your player. Setting the player configuration "require_js_anonymous": true is the required change. The curl statement to make this update appears as follows:

curl \
  --header "Content-Type: application/json" \
  --user $EMAIL \
  --request PATCH \
  --data '{
    "require_js_anonymous": true
  }' \
  https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players/$PLAYER_ID/configuration

If you wish to remove the console warning, but without opting-in to anonymous RequireJS modules, use the "require_js_anonymous": false configuration update, as shown here:

curl \
  --header "Content-Type: application/json" \
  --user $EMAIL \
  --request PATCH \
  --data '{
    "require_js_anonymous": false
  }' \
  https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players/$PLAYER_ID/configuration

See the Step-by-Step: Player Management document for more information on using curl to alter your player's configuration.