动态加载 Brightcove 视频仅加载播放器一次

Question

我知道可以动态加载 brightcov 播放器，如本例中的 brightcov 所示：

https://codepen.io/team/rcrooks1969/pen/JywoKE （与播放器一起创建脚本标签并实例化脚本的视频加载，类似的东西） s.src = "//players.brightcove.net/{accountID}/{playerID}_default/index.min.js"; s.onload = callback;

我正在将多个视频加载到一个页面中，所有视频都是动态加载的并使用同一个播放器。有没有办法只加载该脚本一次并且仍然能够使用 videoJs('myPlayer')

我尝试修改示例，但 videojs 始终未定义， https://codepen.io/optionsit/pen/LBvXZm?editors=1011 （每个按钮应使用相同的播放器脚本加载不同的视频）

我也尝试过使用 Promises，但没有成功，解决对脚本 onload 事件的承诺只会解决第一个视频。

Answer 1

您需要等待 videojs 加载完成。只需禁用按钮，然后您就可以执行以下操作：

s.onload = function() { 
  var btns = document.getElementByTagName('button');
  for (i = 0; i < btns.length;i++) {
    btns[i].disabled = false;
  }
  // or with jQuery simply $('button').prop('disabled', false);
}

Answer 2

如果您将 initPlayer 函数更改为使用 bc() 函数而不是 videojs() 来初始化播放器，它将起作用。

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

我通过修改你的 CodePen 来测试这个。

动态加载 Brightcove 视频仅加载播放器一次

dynamically loading Brightcove videos loading the player only once

brightcove

video.js