我正尝试按照此页面上的说明动态添加 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 脚本标签之后。有谁知道为什么会这样？
最佳答案
BrightCove 站点提供了将其与 RequireJS 一起使用的示例 here .
将此与动态加载播放器相结合，您可以执行如下操作:
脚本.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
关于javascript - 使用 RequireJS 动态添加 Brightcove 视频播放器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45871449/