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

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.

   HTML

   <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>
   

2. In the plugin script file, use registerPlugin(pluginName, playerMinimumVersion, pluginClassOrFunction) to attach the script to the player.

   
   
   JavaScript

   // 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);
   

   
   

   Argument	Description
   pluginName string	Name of the plugin matching its filename The pluginName must match the filename of the plugin.
   playerMinimumVersion string	Minimum player version required the plugin
   pluginClassOrFunction class | function	Plugin function of class to instantiate with new player instances

📘

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

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