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 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.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Load Player Dynamically</title>
<!-- Page styles -->
<style>
.video-js {
width: 640px;
height: 360px;
}
</style>
</head>
<body>
<div id="placeHolder">
<button onclick="addPlayer()">Add Player</button>
</div>
<!-- custom script -->
<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
No comments :
Post a Comment