Developer Basics: Custom Plugin - Why and How

Product(s)
Video Cloud
Brightcove Player
Role(s)
Player Developer
Topic(s)
Plugin Development
Basics
Type
Support Doc

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
   */