Configuring Player Plugins

Product(s)
Video Cloud
Brightcove Player
Role(s)
Studio User
Player Developer
Task(s)
Create & Configure Players
Topic(s)
Plugins

This topic provides an overview of how to configure player plugins.

The Plugins option in the Players module can be used to add a player plugin, stylesheet or add a script to a Brightcove Player. The Plugins page will list all plugins that have been configured for the player. Brightcove provided plugins will not be displayed (i.e. Social, Audience, etc.).

Note: Plugin functionality is available for Video Cloud Pro and Enterprise customers. If you are interested in upgrading your Video Cloud account, please contact Brightcove for more information.

Configuring a player plugin

Plugins are typically developed to:

  • Modify the default behavior of a player
  • Add functionality to a player
  • Customize player appearance

For information on creating your own custom plugins, see Step-by-Step: Plugin Development.

To configure plugins for the player, follow these steps:

  1. Click Players in the navigation header to open the Players module.
  2. Click the link for the player you want to configure.
  3. Click Plugins in the left navigation menu.
  4. Click Add a Plugin and then click on a plugin type:
    • Custom Plugin - Plugin developed by you or a third party
    • Brightcove Plugin - Plugin developed and provided by Brightcove
  5. For Brightcove Plugins, select a Brightcove Plugin from the list. Note that all available Brightcove plugins are not available in the list. For a list of all Brightcove provided plugins, see the Brightcove Player Plugins topic.
  6. For Custom Plugins, enter the following:
    • Plugin Name - As defined in the plugin JavaScript file
    • JavaScript URL - Provide a URL to the file that contains the plugin code
    • CSS URL - Provide a URL to the file(s) that contain(s) the CSS code used by the plugin. Be sure you supply valid CSS. If you supply non-valid CSS, you will see an error in the preview window.
  7. The Options (JSON) field can be used to paste in JSON formatted options for both plugin types. For Brightcove plugins, the available options are outlined in the plugin documentation. For custom plugins, the options usage is shown in the plugin JavaScript code.
  8. Click Save to save the changes.

Note: Any changes made to a player may take up to 5 minutes to appear in published players.

To edit any of the plugin properties, click on the plugin name. To delete the plugin, click the delete icon ().

Adding a stylesheet

A CSS file can be uploaded to customize the player appearance.

To add a CSS file to the player, follow these steps:

  1. Click Players in the navigation header to open the Players module.
  2. Click the link for the player you want to configure.
  3. Click Plugins in the left navigation menu.
  4. Click the Stylesheets link.
  5. Click Add a Stylesheet.
  6. Provide a URL to the CSS file.
  7. Click Save to save the changes.

Note: Any changes made to a player may take up to 5 minutes to appear in published players.

To edit the file path, click on the file name. To delete the file, click the delete icon ().

Adding a script

A script file can be uploaded to customize the player appearance.

Note: If you want to change the player behavior using JavaScript, you must use a plugin. Uploading a JavaScript file here will not affect the player.

To add a script file to the player, follow these steps:

  1. Click Players in the navigation header to open the Players module.
  2. Click the link for the player you want to configure.
  3. Click Plugins in the left navigation menu.
  4. Click the Scripts link.
  5. Click Add a Script.
  6. Provide a URL to the JavaScript file.
  7. Click Save to save the changes.

Note: Any changes made to a player may take up to 5 minutes to appear in published players.

To edit the file path, click on the file name. To delete the file, click the delete icon ().

Plugin code location

When a plugin, be it a Brightcove supplied plugin or a custom plugin you have built, is added to the player as shown above, or using the Player Management API, the plugin becomes part of the player code itself. The plugin code is retrieved from its storage location on the Internet and made part of the code for the specific player to which the plugin was added. To illustrate this further, when you use the Advanced (in-page) player implementation you see a <script> tag similar to the following:

<script src="//players.brightcove.net/1507807800001/default_default/index.min.js"></script>

This is the code that defines your Brightcove Player. This file includes code for any of the plugins you have added to the player. The plugin code is also included in the Standard (iframe) player implementation.

If you develop your own plugin and change the source code in its Internet storage location, be sure you re-publish your player as the new plugin code will NOT be part of the JavaScript file unless you do so.

For information on creating plugins, see the Step-by-Step: Plugin Development developer document.