support Contact Support | system status System Status
Page Contents

    Player Developer Basics: Custom Plugin - Converting Code

    In this topic, you will learn how to convert code that controls the Brightcove Player into a custom plugin.
     

    Steps

    These steps assume you have written the code to enhance the Brightcove Player on a single, HTML page.

    1. Create empty files for the JavaScript and CSS. As a best practice, the filenames should reflect the plugin's functionality. In the video back-forward-buttons.js and back-forward-buttons.css are used.
    2. Copy the CSS from the HTML page, minus the <style> tags, and paste into the dedicated CSS file.
    3. Copy the JavaScript from the HTML page, minus the <script> tags, and paste into the dedicated JavaScript file.
    4. In the JavaScript file, locate the code that resembles
      videojs.getPlayer('myPlayerID').ready(function () {
      and replace it with the following, choosing a name for the plugin that reflects its functionality:
      videojs.registerPlugin('backForwardButtons', function() {
    5. From the original HTML page, remove the <style> block and replace it with a link to the CSS file:
      <link href="back-forward-buttons.css" rel="stylesheet">
    6. From the original HTML page, and just below the <script> tag that links to the player's index.min.js file, add a second <script> tag to link to the plugin's JavaScript:
      <script src="back-forward-buttons.js"></script>
    7. From the original HTML page, remove the contents of the <script> block, and replace it code that performs the following:
      • Get a reference to the player using the getPlayer() and ready() methods, that has a related anonymous event handler function.
      • In the event handler function, assign a variable named myPlayer the this keyword, which represents the player in this context.
      • Call the plugin.
      <script>
        videojs.getPlayer('myPlayerID').ready(function() {
          var myPlayer = this;
          myPlayer.backForwardButtons();
        });
      </script>

    Complete Code

    Main HTML page

      <!doctype html>
      <html>
    
      <head>
        <meta charset="UTF-8">
        <title>Untitled Document</title>
      <link href="back-forward-buttons.css" rel="stylesheet">
      </head>
    
      <body>
    
        <video id="myPlayerID"
          data-video-id="5992439742001"
          data-account="1752604059001"
          data-player="default"
          data-embed="default"
          data-application-id
          class="video-js"
          controls
          width="640" height="360"></video>
        <script src="//players.brightcove.net/1752604059001/default_default/index.min.js"></script>
        <script src="back-forward-buttons.js"></script>
    
        <script>
          videojs.getPlayer('myPlayerID').ready(function() {
            var myPlayer = this;
            myPlayer.backForwardButtons();
          });
        </script>
    
      </body>
    
      </html>

    Custom plugin's JavaScript

      videojs.registerPlugin('backForwardButtons', function() {
        var myPlayer = this,
            jumpAmount = 5,
            controlBar,
            insertBeforeNode,
            newElementBB = document.createElement('div'),
            newElementFB = document.createElement('div'),
            newImageBB = document.createElement('img'),
            newImageFB = document.createElement('img');
    
        // +++ Assign IDs for later element manipulation +++
        newElementBB.id = 'backButton';
        newElementFB.id = 'forwardButton';
    
        // +++ Assign properties to elements and assign to parents +++
        newImageBB.setAttribute('src', '//learning-services-media.brightcove.com/doc-assets/player-development/samples/back-forward-buttons/back-button.png');
        newElementBB.appendChild(newImageBB);
        newImageFB.setAttribute('src', '//learning-services-media.brightcove.com/doc-assets/player-development/samples/back-forward-buttons/forward-button.png');
        newElementFB.appendChild(newImageFB);
    
        // +++ Get controlbar and insert elements +++
        controlBar = myPlayer.$('.vjs-control-bar');
        // Get the element to insert buttons in front of in conrolbar
        insertBeforeNode = myPlayer.$('.vjs-volume-panel');
    
        // Insert the button div in proper location
        controlBar.insertBefore(newElementBB, insertBeforeNode);
        controlBar.insertBefore(newElementFB, insertBeforeNode);
    
        // +++ Add event listeners to jump back or forward +++
        // Back button logic, don't jump to negative times
        newElementBB.addEventListener('click', function () {
          var newTime,
              rewindAmt = jumpAmount,
              videoTime = myPlayer.currentTime();
          if (videoTime >= rewindAmt) {
            newTime = videoTime - rewindAmt;
          } else {
            newTime = 0;
          }
          myPlayer.currentTime(newTime);
        });
    
        // Forward button logic, don't jump past the duration
        newElementFB.addEventListener('click', function () {
          var newTime,
              forwardAmt = jumpAmount,
              videoTime = myPlayer.currentTime(),
              videoDuration = myPlayer.duration();
          if (videoTime + forwardAmt <= videoDuration) {
            newTime = videoTime + forwardAmt;
          } else {
            newTime = videoDuration;
          }
          myPlayer.currentTime(newTime);
        });
      });

    Custom plugin's CSS

      #backButton img{
        margin-top: -7px;
        height: 45px;
        width: 45px;
        cursor: pointer;
      }
      #forwardButton img{
        margin-top: -7px;
        height: 45px;
        width: 45px;
        cursor: pointer;
      }

    Page last updated on 27 Feb 2020