Quick Start: Plugin Development

The page you are looking for doesn't live here anymore -- redirecting you to in 3 seconds.

In this topic you will learn via a hands-on introduction about plugin development and use.

Development approach

The JavaScript and CSS you develop for plugins will eventually need to be stored in an Internet accessible location, but it is recommended that during development you create and test locally. To do this, you will perform the following:

  • Create a file to contain your JavaScript plugin code
  • Create a file to contain your CSS plugin code (if needed)
  • Create an HTML file for testing. Use the embed_in_page implementation for the player
  • Add an id to the <video> tag
  • Link to the JavaScript and CSS pages
  • Use a <script> tag to call the function
  • Develop and debug your code

The rest of this document guides you through these steps to build and deploy a simple plugin.

Build the basics

To begin the process of building a plugin, you need to perform some of the foundational, high-level steps mentioned above.

  1. Create a folder named plugin-dev that can be browsed using an actual HTTP server. The server is necessary for the iframe implementation testing later in this document.
  2. In the folder, create three files with the following names:
    • plugin-dev.html (Insert the basic elements for an HTML page into the file)
    • plugin-dev.js
    • plugin-dev.css
  3. Using Video CloudPerform Studio's Players module, create a new player.
  4. In the Media module, select a video and publish it with the newly created player.
  5. Using the VIDEO CONTENT section, associate a video with the player, then save and publish the player.
  6. Copy the Advanced code and paste into the body of the plugin-dev.html page.
  7. From the Embed Code & URL > Published Player menu, copy the Advanced Embed Code code and paste into the body of the plugin-dev.html page.
  8. Add an id attribute to the <video> tag with a value of player.
  9. Check to be sure your HTML page appears similar to the following (Perform customers will not have a data-video-id property):
    <!doctype html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>Quick Start Plugin Dev</title>
    </head>
    
    <body>
      <video id="player"
        data-video-id="4607746980001"
        data-account="1507807800001"
        data-player="efdfea47-94f7-41bf-aca5-b6864091a716"
        data-embed="default"
        class="video-js" controls></video>
      <script src="//players.brightcove.net/1507807800001/efdfea47-94f7-41bf-aca5-b6864091a716_default/index.min.js"></script>
    </body>
    
    </html>
  10. Browse the page to be sure your video is playing.

Create JavaScript

Next you will create and test the JavaScript code to build an overlay for the video.

  1. Open the file plugin-dev.js and paste in the following JavaScript code:
    videojs.plugin('pluginDev', function() {
      var player = this,
      overlay = document.createElement('p');
      overlay.className = 'vjs-overlay';
      overlay.innerHTML = "Becoming a plugin developer";
      player.el().appendChild(overlay);
    });
  2. Check your understanding of each line inserted:
    • Lines 1 and 7 are the standard syntax to begin and end a new player plugin. In this case, the plugin name is pluginDev.
    • Line 2 is a standard way to have a way to get a handle to the player. This is necessary to call methods of the player, which you will do later.
    • Line 3 creates a paragraph element in the document and assigns it to the overlay variable.
    • Line 4 assigns a class to the overlay which will be used later in conjunction with CSS.
    • Line 5 adds text to the paragraph element.
    • Line 6 uses the el() method of the player to retrieve the player's DOM element, then appends the new paragraph element to that DOM.
  3. In the HTML file, add the following code just below the existing <script> tags. This code includes the JavaScript file and then calls the method defined in that JavaScript.
    <script type="text/javascript" src="plugin-dev.js"></script>
    <script>videojs('player').pluginDev();</script>
  4. Browse the HTML page again, and you will see nothing visible has changed. The problem is that the overlay is there, but not visible. You will change this later.
  5. To verify the overlay is present, use the development tools of your browser. In the Elements section, check the player's <div> element, and you will see the newly inserted paragraph element, as shown here:
    quick-start-overlay-in-elements

Style the plugin

You know the overlay is now part of the player, but not visible. Next you will style the overlay so it becomes visible. In this section of the document, you will use a very simple CSS to ensure the overlay is visible.

  1. Open the file plugin-dev.css and paste in the following styles:
    .vjs-overlay {
        background-color: #333333;
        color: white;
        position: absolute;
    }
  2. In the HTML file, add the following code just below the existing <link> tag. This code links to your newly created CSS file.
    <link href="plugin-dev.css" rel="stylesheet">
  3. Browse the HTML page and you will see the overlay is now visible.
    quick-start-overlay-showing

Pass data to the plugin

It will often be the case that you want to change the behavior of your plugin at initialization time. This is possible by passing data into the plugin using the options property. In this example you will pass in the text to be displayed in the overlay.

  1. Open the HTML page and alter the <script> tags so a variable named options is created and assigned an object with a key-value pair of "overlayText":"This data is supplied at initialization". Also, pass the options variable as an argument when calling the pluginDev() method. The changes should appear as follows:
      <script type="text/javascript" src="plugin-dev-copy.js"></script>
      <script type="text/javascript">
        var options = {"overlayText": "This data supplied at initialization"};
      </script>
      <script>videojs('player').pluginDev(options);</script>
  2. You now need to alter the plugin's JavaScript to use the data passed to the function. Line 110 shows the function accepting the data as a parameter, and line 114 uses the object's data.
    videojs.plugin('pluginDev', function(options) {
      var player = this,
      overlay = document.createElement('p');
      overlay.className = 'vjs-overlay';
      overlay.innerHTML = options.overlayText;
      player.el().appendChild(overlay);
    });
  3. Browse the HTML page and you will see the new text being used.
    quick-start-options-showing

Deploy the plugin

Once you have the plugin, CSS and player functioning correctly, you need to deploy the assets for proper use. Here is an overview of the steps required for deployment:

  • Copy/move the JavaScript and CSS files to your remote location
  • Use Video CloudPerform Studio to add the plugin configuration to the player.
  • Create an HTML file for testing and use the iframe implementation for the player
  • Test for anomalies

You will now be guided through these steps.

  1. Move your plugin JavaScript and CSS files to an Internet accessible location of your choice.
  2. In the folder in which you are working, create another file called plugin-dev-iframe.html.
  3. Use Video CloudPerform Studio's Players module to edit the player you created earlier.
  4. Locate the PLUGINS section, and click the Edit button.
  5. In the JavaScript area, enter the path to your Internet accessible JavaScript file.
    Studio add JS in plugins section
  6. In the CSS area, enter the path to your Internet accessible CSS file.
    Studio add CSS in plugins section
  7. In the Name, Options (JSON) area, enter the plugin name and data passed to the plugin.
    Studio add Name, Option in plugins section
  8. Save and publish your player.
  9. In the Media module, select a video and publish it with the newly updated and published player.
  10. Copy the Standard code and paste into the body of the plugin-dev-iframe.html page. Your page should appear similar to the following:
  11. From the Embed Code & URL > Published Player menu, copy the Standard Embed Code code and paste into the body of the plugin-dev-iframe.html page. Your page should appear similar to the following:
    <!doctype html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>Quick Start Plugin Dev - iframe</title>
    </head>
    
    <body>
        <iframe src='//players.brightcove.net/1507807800001/5bd313a3-4f88-46be-9678-b9dc8f51c1b2_default/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
    </body>
    
    </html>
  12. Browse the HTML page and you should see the plugin functioning correctly with the iframe.

3rd party libraries

If your plugin has dependencies on 3rd party libraries, for instance jQuery, you need to include them in one of these two ways:

  • Add the library as another JavaScript file in the Plugins section of Players module in Video Cloud Studio.
  • Add multiple entries in the scripts section of the player configuration in a curl statement.

BE SURE you put the libraries on which your plugin is dependent before your plugin's JavaScript entry in both scenarios listed above. The order of entry DOES matter.