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

matrix

<强>的index.html

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();

以下是您更新的插件：http://plnkr.co/edit/vzQQgjnwmRziZJsY6mNH?p=preview

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

1 个答案: