Player Developer Basics: Custom Plugin - Passing Data

In this topic, you will learn how to pass data to a custom plugin.

Steps

In the custom plugin code, place an options parameter in the anonymous function that defines the plugin.
```
videojs.registerPlugin('navigateOnVideoEnd', function (options) {
  var myPlayer = this;
  ...
});
```

Use desired properties of the parameter object in your plugin code for customization:

videojs.registerPlugin('navigateOnVideoEnd', function (options) {
  var myPlayer = this;
  ...
  window.location.href = options.redirectURL;
});

In the HTML page that calls the plugin, build an object with the required property/properties:

<script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this,
       options = {"redirectURL": "http://support.brightcove.com"};
    ...
  });
</script>

When calling the custom plugin, pass the options object as a parameter:

<script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this,
       options = {"redirectURL": "http://support.brightcove.com"};
    myPlayer.navigateOnVideoEnd(options);
  });
</script>

If using Studio, pass the options object to the custom plugin via the Options(JSON) form element:

Complete Code

Plugin code

videojs.registerPlugin('navigateOnVideoEnd', function (options) {
  var myPlayer = this;
  myPlayer.on('ended', function () {
    window.location.href = options.redirectURL;
  });
});

HTML page calling code

<video-js id="myPlayerID"
  data-video-id="5701193190001"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id=""
  controls=""
  width="640"
  height="360"></video-js>
<script src="//players.brightcove.net/1752604059001/default_default/index.min.js"></script>

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

<script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this,
       options = {"redirectURL": "http://support.brightcove.com"};
    myPlayer.navigateOnVideoEnd(options);
  });
</script>