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>
<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