Load Brightcove player dynamically in AEM

In this JavaScript code you will perform the following tasks:

Define the variables.
Create the player code.
Inject it into the HTML page.
Create the appropriate script block and assign the appropriate source.
Append the dynamically create a script to the page.
On the load of the script, which happens automatically with the append, call a function to instantiate the player and play the video.

Here is the sample code to load the Brightcove player dynamically when clicking on a button.

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>Load Player Dynamically</title>

<style>
.video-js {
width: 640px;
height: 360px;
}
</style>
</head>

<body>
<div id="placeHolder">
<button onclick="addPlayer()">Add Player</button>
</div>

<script type="text/JavaScript">
var myPlayer,
playerHTML,
playerData = {
'accountId': '1752604059001',
'playerId': '04ee9f58-9d08-43ea-803f-abda86776db2',
'videoId': '3851380732001'
};

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 s = document.createElement('script');
s.src = "//players.brightcove.net/" + playerData.accountId + "/" + playerData.playerId + "_default/index.min.js";
document.body.appendChild(s);
s.onload = callback;
}

function callback() {
myPlayer = videojs('myPlayer');
myPlayer.play();
}
</script>
</body>
</html>

Check Demo

AEM Tutorials for Beginners

April 26, 2020
Estimated Post Reading Time ~