使用 RequireJS 动态添加 Brightcove 视频播放器

Question

我正尝试按照此页面上的说明动态添加 brightcove 播放器。 Brightcove Player Sample: Loading the Player Dynamically

由于使用 RequireJS，将 Brightcove 的 index.min.js 添加到页面时，视频播放器未初始化。

这是一个例子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"); 
  });
}

要查看实际工作的视频播放器，请在 index.html 文件中执行以下操作： 1. 注释掉 require.js 脚本标签。 2. 删除按钮和playerScript 脚本标签周围的注释。

请注意，视频播放器的唯一工作方式是在删除 RequireJS 脚本标签之后。有谁知道为什么会这样？

Answer 1

BrightCove 站点提供了将其与 RequireJS 一起使用的示例 here。

将此与动态加载播放器相结合，您可以执行如下操作：

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>

这是您更新的内容：http://plnkr.co/edit/vzQQgjnwmRziZJsY6mNH?p=preview

使用 RequireJS 动态添加 Brightcove 视频播放器

Adding Brightcove Video Player Dynamically Using RequireJS

javascript

requirejs

brightcove