Add a custom or third-party plugin (Web Player)

Learn how to add functionality to a web player through a plugin.

The JWP web player and associated code provide an array of core features to engage your viewers and monetize your content. But, you can extend these core features by using plugins.

By adding custom or third-party plugins within the setup configuration of a web player, you can produce unique user experiences:

  • Create custom user interactions
  • Initiate bespoke player behaviors

🚧

The following instructions explain only how to add plugins to the web player. Since JWP does not provide support for any third-party plugin or created plugins that you may add or create, we strongly recommend testing your implementation in a staging environment.



Add and register a plugin

📘

A plugin becomes accessible in the jwplayer().plugins object only after it is registered.


Use the following steps to add and register a plugin:

  1. Within the options argument of setup(), add a plugins object that includes the URL of the plugin script to be added. When the player is instantiated, the plugin script is downloaded and initialized.

    As shown in the following example, multiple plugin scripts can be added to plugins as a comma-delimited list. Be sure to add any key-value pairs required by a plugin script.
<div id="myElement"></div>

<script type="text/JavaScript">
    jwplayer("myElement").setup({ 
        "playlist": "https://cdn.jwplayer.com/v2/media/VjvowSFi",
        "plugins": {       
            "//myexample.com/jwplayer/scripts/sampleScript.js": {
                sampleFunction: () => {
                    console.log('from plugin: hello world');
                },
                name: 'Dan Woon Acorn'
            },
            "//playertest.com/plugins/newsticker.js": {}
        }
    });
</script>

  1. In the plugin script file, use registerPlugin(pluginName, playerMinimumVersion, pluginClassOrFunction) to attach the script to the player.
// sampleScript plugin script (callback)
function initPlugin(playerInstance, pluginConfig, pluginDiv) {
    pluginConfig.sampleFunction();
    console.log('from plugin: config name', pluginConfig.name);
}

const registerPlugin = window.jwplayerPluginJsonp || window.jwplayer().registerPlugin;

// registerPlugin()
registerPlugin('sampleScript', '8.0', initPlugin);
ArgumentDescription
pluginName stringName of the plugin matching the name referenced in the plugins object of the player

The pluginName must match the name referenced in the plugins object of the player.
playerMinimumVersion stringMinimum player version required the plugin
pluginClassOrFunction class | functionPlugin function of class to instantiate with new player instances


📘

Within the callback function assigned to registerPlugin(), the following three variables are also available:

  • playerInstance string: Instance of the player API with which the plugin is being registered
  • pluginConfig string: Config block passed in player().setup()
  • pluginDiv string: DIV created in the DOM for this plugin
    This DIV can be used or the DOM can be manipulated within the plugin code.


Did this page help you?