Local development for Brightcove plugins

Many of Alley’s publishing clients use Brightcove’s video platform with custom plugins to handle more complex ads and analytics functionality. To deploy a plugin, Brightcove downloads the file from a specified URL and includes it in a JavaScript bundle that Brightcove compiles when a player is “published”. Including the plugin in the player bundle is more performant and more portable than loading it as a separate JS file would be. But these advantages come at a cost for local development workflow, since you can’t test changes until the plugin file is uploaded somewhere and the player is republished. On a recent deep dive into videos ads and analytics for the New York Post, here’s how we worked around this.

Plugin setup

Each plugin, for example our analytics integration, has three components:

1. brightcove-plugins-analytics.js
2. brightcove-plugins-analytics-local.js
3. analytics.js

analytics.js contains the guts of the plugin. It looks something like this:

export default function analytics(options) {
  // do stuff...
}

 
Using ES6 modules makes this a lot easier. Next, brightcove-plugins-analytics-local.js, which we only load for just local development before loading the Brightcove player JS:

import analytics from './src/analytics';

window.__brightcoveLocalAnalytics =
  window.__brightcoveLocalAnalytics || analytics;

 
And finally, brightcove-plugins-analytics.js, which is what Brightcove bundles in the published player:

import analytics from './src/analytics';

videojs.registerPlugin('analytics',
  window.__brightcoveLocalAnalytics || analytics);

How it works

First, the local file assigns our plugin function to a global variable. Then, when the Brightcove player loads and executes videojs.registerPlugin(), it looks first for that global. If it finds it, that version of the plugin function is used. If the global is not found (i.e. the local version was not loaded), whatever version of the plugin function was included in the published Brightcove player is used instead.

This way, we can use a task like Webpack’s watch feature to rebuild the local copy while we work, and test the plugin on a local environment without having to re-bundle the Brightcove player.

Want to learn more? Reach out on our contact form!