Player Developer Basics: Custom Plugin - Why and How

In this topic, you will learn the why you should use custom plugin, and learn the high level steps to their development.
 

Why custom plugins?

  • Don’t duplicate same code in multiple places
  • All code associated with plugin becomes part of the player

Steps

  1. Code the enhanced player functionality
  2. Create a new file that contains just the CSS
  3. Create a new file that contains the JavaScript
    • Alter line of code that uses the getPlayer() method
  4. Link to the CSS and JavaScript files, then call the custom plugin

Complete Code

Main HTML page

  <!doctype html>
  <html>

  <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <link href="custom-plugin.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="custom-plugin.js"></script>

    <script>
      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this;
        myPlayer.pluginName();
      });
    </script>

  </body>

  </html>

Custom plugin's JavaScript

  videojs.registerPlugin('pluginName', function() {
    var myPlayer = this;
    // Complete JavaScript
    // ...
  });

Custom plugin's CSS

  /*
   CSS Here
   */