Showing posts with label Brightcove. Show all posts
Showing posts with label Brightcove. Show all posts

Thursday, 19 November 2015

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 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 brightcove player dynamically when clicking on a button.

<!doctype html>

  <meta charset="UTF-8">
  <title>Load Player Dynamically</title>
  <!-- Page styles -->
    .video-js {
      width: 640px;
      height: 360px;

  <div id="placeHolder">
    <button onclick="addPlayer()">Add Player</button>
  <!-- custom script -->
  <script type="text/JavaScript">
    var myPlayer,
      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 = "//" + playerData.accountId + "/" + playerData.playerId + "_default/index.min.js";
      s.onload = callback;

    function callback() {
      myPlayer = videojs('myPlayer');;


Check Demo