How to Create a Player Extension

Player extensions are JavaScript scripts that can be provided to the player using two methods:

  • Either as part of a JavaScript script tag on the same page where the Player is embedded.
  • Or as a separately hosted JavaScript file.

 

In your custom JavaScript file/tag you will need to declare your Player Extension using the following syntax:

vidible.extension('yourExtension', function (config, player, view) {
//Define your extension functionality here...
});


If your extension JavaScript code is intended to be obfuscated, please use the following syntax:

vidible.extension('yourExtension', ['config', 'player', 'view', yourExtensionFunction])

Note: 'yourExtension' is a placeholder for the name of your custom extension.

Additionally, the extension declaration includes three main elements that will be passed by the dynamic player API tag: 

  • config - This object is your extension's configuration settings that are defined on the Dynamic player API tag level. This includes any properties that you would like to define and pass to your extension to control it.

    For example: A config property can be an image URL. Whatever image URL you define in the Dynamic Player API Tag will be passed to your extension.


  • player - The player object itself to access it's Events and Actions.

    For example: If you would like to display an image each time the player is paused, you can bind a function to the player 'Pause' event.

  • view - a constructor that will allow you to generate a container used to hold the visual components of your extension. For further details, please see How to Use the Player Extension 'view' Constructor.

    For example: define the size and location of the custom image that will be displayed in the player.

 Note: You can pass these objects in any order you want as they are evaluated by their names and not their position.


After you have created an extension, please see How to Reference the Extension using the Dynamic Player API Tag.

To view a live example of how Player Extensions work, please click here.

Have more questions? Submit a request