Developing a Brightcove Player Plugin

This post is a broad overview of developing a player plugin using Brightcove players. Brightcove has a lot of documentation and it can be daunting when starting to develop your first plugin. I will try to give a broad explanation of the actual development, publish processes and use of the plugin. First, there will be a short setup for the player and plugin, then the development and deployment processes. A “skeleton” repository is being used which you can use to directly jump into developing your plugin.

Brightcove Player

The Brightcove player is a video player which allows embedding custom scripts and styles to the player. You create a player, style it using the Brightcove default designs and provide it with any functionality you like. Before the development process, you will need to upload at least one video since you will use it to test out your plugin. Videos are uploaded using the media section on the Brightcove website, but this step is not required if you already have a video uploaded.

Now that the video is set up and our player is created, it is time to see if it is working. Click on the “Publish and Embed” button and select “Web Player”. This will open a popup window, asking you to select a player for the video. Select our newly created player, scroll to the bottom of the window, select the “Advanced” tab and copy the generated HTML code. You can either create a simple index.html file and copy the HTML code into the body or into the body of the index.html file of the provided skeleton. The HTML code has a script tag, which includes the necessary modules for the video player and any other plugins which might be set on the player.

Development

Before we actually start coding, we need to set an id attribute on the video tag in the index.html file. The id is important since we will reference it when calling the plugin. (This example uses the id “player”) The skeleton bundles the javascript and style files into the dist folder and for convenience they are already included in the index.html file. The plugin.js file registers the plugin and runs it only in the in the development environment and the style.sss adds basic styles.

In the example below, we are registering a plugin called playerPlugin. The “devPlayerOptions” object is used simply to mock the options which are set on the player. Finally, on line 10 we reference the video setup in our index.html file and call the plugin passing the options to it. The string “player” is just referencing the “player” id tag setup previously.

videojs.registerPlugin('playerPlugin', function (opts) {
  ...
})

if (process.env.NODE_ENV !== 'production') {
  const devPlayerOptions = {
    "customOption": "customOptionValue",
  }

  videojs('player').playerPlugin(devPlayerOptions)
}

Deployment

The deployment process is simple but takes a while for us to actually see them when publishing new versions of the player. Usually, it takes about a minute or two for all the videos to accept the newly published changes. Deployment steps:

1. Build the scripts - you will need to change the NODE_ENV variable to something other than development so the plugin doesn't call itself twice.
2. Host them where they can be publicly accessible - they need to be accessible for the plugin to work
3. Update the player to use the scripts - simply add the hosted javascript and CSS urls to the plugin
4. Setup the plugin name and options - the plugin name needs to be the same as set in the "plugin.js" file. It is the first parameter to the "registerPlugin" function (In our example it is "examplePlugin")
5. Publish the changes - you need to publish the changes to have the videos use the new player with the updated/added scripts
6. Wait until it propagates to all the videos - this step usually takes around a minute or two

When the plugin is published it takes care of calling the actual plugin. That is why in our “plugin.js” file we check the environment to make sure we don’t call the plugin in non-development environments. The plugin code is shown below:

videojs('player').examplePlugin(devPlayerOptions)

Once the changes are published to the player, simply use the same video and remove the scripts in the index.html file. The script line needs to be removed because now the script tag included with the video will have the plugin code. It will take care of registering and calling it.

<script src="plugin.js"></script>

Conclusion

Developing Brightcove plugins is pretty straightforward. My only problem was trying to figure out how to actually test and deploy the final product. Brightcove has its own “skeleton” for creating plugins, but it was a bit of an overkill for me. I have attempted to shorten the development and deployment details which are documented thoroughly in the Brightcove documentation and I hope it helps someone with their new plugin product.