support Contact Support | system status System Status

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