Adding Brightcove Video Player Dynamically Using RequireJS

Question

I'm trying to add a brightcove player dynamically by following instructions on this page. Brightcove Player Sample: Loading the Player Dynamically

The video player doesn't initialize when Brightcove's index.min.js is added to the page due to the use of RequireJS.

Here is an example plunk.

function addPlayer() {
  // dynamically build the player video element
  playerHTML = '<video id=\"myPlayer\" data-video-id=\"' + playerData.videoId + '\"  data-account=\"' + playerData.accountId + '\" data-player=\"' + playerData.playerId + '\" data-embed=\"default\" class=\"video-js\" controls></video>';
  // inject the player code into the DOM
  document.getElementById('placeHolder').innerHTML = playerHTML;
  // add and execute the player script tag
  var playurl = "//players.brightcove.net/" + playerData.accountId + "/" + playerData.playerId + "_default/index.min.js";

  require([playurl], function() {
      console.log("player script added"); 
  });
}

To see the video player actually working do the following in the index.html file: 1. Comment out the require.js script tag. 2. Remove the comments around the button and playerScript script tag.

Note that the only way the video player works is after the removal of the RequireJS script tag. Does anyone know why this is the case?

K Scandrett · Accepted Answer · 2017-08-28T07:44:43.413

The BrightCove site provides an example of using it with RequireJS here.

Combining this with dynamically loading the player, you might do something like:

script.js

var playerData = {
    'accountId': 'xxx',
    'playerId': 'yyy',
    'videoId': 'zzz'
  };

require.config({
  'paths': {
    'bc': "//players.brightcove.net/" + playerData.accountId + "/" + playerData.playerId + "_default/index.min"
  },
  timeout: 30
});

function addPlayer() {
  // dynamically build the player video element
  var playerHTML = '<video id=\"myPlayer\" data-video-id=\"' + playerData.videoId + '\"  data-account=\"' + playerData.accountId + '\" data-player=\"' + playerData.playerId + '\" data-embed=\"default\" class=\"video-js\" controls></video>';
  // inject the player code into the DOM
  document.getElementById('placeHolder').innerHTML = playerHTML;

  // add and execute the player script tag
  require(['bc'], function() {
    console.log("player script added");
  });
}

addPlayer();

index.html

<!DOCTYPE html>
<html>

<head>
  <script data-main="script" src="//requirejs.org/docs/release/2.1.20/minified/require.js"></script>
</head>

<body>
  <div id="placeHolder">Placeholder Here</div>
</body>

</html>

Here's your plunk updated: http://plnkr.co/edit/vzQQgjnwmRziZJsY6mNH?p=preview

I don't have any problems when pre-loading the script. It's only when I'm trying to add the script dynamically is when I'm running into issues. I did try to use their requredjs example to dynamically add the script without luck. — bradley4, Aug 29 '17 at 14:28
I don't understand what you mean by that. In my example I'm not preloading the script. It loads only when `addPlayer()` is called. — K Scandrett, Aug 29 '17 at 15:30
are you able to run this with video files from different accounts? For me it is running only these players which have the same accoutn id as first one. It may be also caused by Aurelia framework, but I want to confirm. — plusz, May 28 '18 at 13:21

Adding Brightcove Video Player Dynamically Using RequireJS

1 Answers1