[SOLVED] dynamically loading Brightcove videos loading the player only once

dynamically loading Brightcove videos loading the player only once

I am aware that it is possible to load brightcov player dynamically as in this example from brightcov:

https://codepen.io/team/rcrooks1969/pen/JywoKE (creating a script tag along with the player and instantiating the video onload of the script, something along the lines of) s.src = "//players.brightcove.net/{accountID}/{playerID}_default/index.min.js"; s.onload = callback;

I am loading multiple video into a page, all of them are loaded dynamically and use the same player. Would there be a way to load that script only once and still be able to use videoJs('myPlayer')

I tried to adapt the example but videojs is always undefined, https://codepen.io/optionsit/pen/LBvXZm?editors=1011 (each button should load a different video with the same player script)

I tried to use Promises as well with no luck, resolving the promise to the onload event of the script would only resolve for the first video.

Solution

If you change your initPlayer function to use the bc() function to initialize the player instead of videojs(), it will work.

initPlayer = function(player){
  // +++ Initialize the player and start the video +++
  myPlayer = bc(player);
  myPlayer.play();
}

I tested this by modifying your CodePen to be certain.