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.

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.
Copy the CSS from the HTML page, minus the <style> tags, and paste into the dedicated CSS file.
Copy the JavaScript from the HTML page, minus the <script> tags, and paste into the dedicated JavaScript file.
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() {
```
Note that the filenames for the CSS and JavaScript uses hyphens, while the plugin name is camelCase. This is simply a convention used by the writer of the code and you can name entities as you wish.
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">
```
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>
```
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=""
      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', '/assets/samples/back-forward-buttons/back-button.png');
    newElementBB.appendChild(newImageBB);
    newImageFB.setAttribute('src', '/assets/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;
  }