support Contact Support | system status System Status
Page Contents

    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
          class="video-js"
          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
       */

    Page last updated on 27 Feb 2020