support Contact Support | system status System Status

Player Developer Basics: Custom Plugin - Passing Data

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

Steps

  1. 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;
      ...
    });
  2. 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;
    });
  3. 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>
  4. 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>
  5. If using Studio, pass the options object to the custom plugin via the Options(JSON) form element:
    studio plugin configuration

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
  class="video-js"
  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>

Page last updated on 27 Feb 2020