Video Recommendation Player Plugins
      Back to home
      1. Knowledge Base and Documentation
      2. Video Recommendations
      3. Video Recommendation Player Plugins

      Brightcove Player Plugin

      This details how to install the Adaptive Brightcove Plugin by either bundling it with the player via Brightcove Studio or without bundling by installing directly in HTML.

      Implementing the Plugin Bundled via Brightcove Studio

      This IRIS.TV Adaptive plugin documentation is specific for the Brightcove v5.0+ and v6.0+ video players.  This plugin will be added to the Brightcove VideoCloud, Players section.

      Before installing please make sure you receive your client token from your account manager.

      Adding the Brightcove Plugin

      1. Go the Plugins section of your player.

      2. Click Add a Plugin and select Custom Plugin

      You'll see this blank Plugins screen:

      3. Add the following for each field:

      Plugin Name:

      irisTvBrightcovePlugin

      Note: please copy the exact case and spelling of "irisTvBrightcovePlugin" as in the example.

      JavaScript URL:

      https://ovp.iris.tv/plugins/brightcove/v2/iris-bc.adaptive.min.js

      CSS URL:

      https://ovp.iris.tv/plugins/brightcove/v2/styles/iris-bc.adaptive.min.css

      Options(JSON):

      {
        "overlayText": "This data is supplied at initialization",
        "start_up_next": true,
        "end_up_next": true,
        "ssl": true,
        "client_token": [provided by IRIS.TV]
      }

      Note: Make sure to only have instance of the plugin installed. Having multiple instances of the plugin installed on one player will cause the plugin to malfunction.

      Here's how the plugin looks once completed:

       

      Additional customizations, such as customizing the start_up_next_text, can be added to the Options(JSON).

      4. Disable any current Brightcove End Screen to enable player to be powered by IRIS.TV:

      In player options set End Screen to None:

      Once the above is complete you are ready to test your player.

      Activating Carousel Recs for Brightcove Clients

      The Carousel Recs plugin option generates recommendations at plugin load. If the IRIS.TV plugin is used to populate a carousel or right rail, this option can be used to populate the carousel at player load. This feature requires the IRIS.TV Adaptive Plugin Version "Adaptive v1.12.0".

      Steps to Activate:

      1. Add “carousel_recs”:true to the IRIS.TV plugin options
      2. Republish player to update plugin and active “carousel_recs” plugin option
      3. Once the player is republished, confirm IRIS.TV Plugin and Library Version are updated
        1. Plugin Version is Adaptive v1.12.0
        2. Library Version is IRIS Adaptive v1.12.5
      4. If the carousel hasn’t been created yet, the client can use these instructions to build out the carousel: support.iris.tv/adaptive-plugin-developer-options

      Example of Options(JSON) with carousel_recs added

      Example of plugin version in the browser's console log


      Implementing the Plugin Directly in the Page HTML

      Overview

      This documentation details how to install the Brightcove Adaptive Plugin in the page HTML without using the Brightcove CMS to bundle the IRIS.TV Plugin within the player code. 

      Steps

      1. Add IRIS.TV CSS file for Brightcove into the HTML header

      Example of CSS in HTML Header:

      <link rel="stylesheet" type="text/css" href="https://s3.amazonaws.com/iris-playground/cosmos/styles/iris-bc.adaptive.css">

      2. In the HTML Body add the Brightcove Adaptive Plugin JavaScript

      Below the div for the video container and the JavaScript for the Brightcove player, please add the Brightcove Adaptive Plugin JavaScript a script tag:

      <script src="https://s3.amazonaws.com/iris-playground/cosmos/plugins/iris-bc.adaptive.js" type="text/javascript"></script>

      Here's an example of the Brightcove Adaptive Plugin following the player container and Brightcove player JS. Please note, video container will need to contain information specific for the client. 

      <div id="test_video_container">

          <video id="myPlayer"

                  data-account="[account_id]"

                  data-player="[player_id]"

                  data-video-id="[video_id]"

                  data-embed="default"

                  class="video-js">

          </video>

      </div>

       

      <script src="https://players.brightcove.net/1736779881001/BklJOrErO_default/index.min.js"></script>

      <script src="https://s3.amazonaws.com/iris-playground/cosmos/plugins/iris-bc.adaptive.js" type="text/javascript"></script>

      3. Add the playerOptions to the HTML Body

      In the HTML body add a variable with the playerOptions. These will contain specifications for the Brightcove Adaptive Plugin.

      Note: If "client_token" isn't provided, the plugin will use the Brightcove Account as the "client_token".

      Here's an example of the playerOptions in the HTML body:

      <script>
          var playerOptions = {
              client_token: "[IRIS.TV Provided Client Token]"
              campaign_tracking: true,
              global: "iris_player",
              perform_player: false,
              start_up_next: true,
              start_up_next_time: 14,
              end_up_next: true,
              end_up_next_text: "RECOMMENDED: ",
              end_up_next_time: 10,
              thumbs_up: true,
              thumbs_down: true,
              skip_forward: true,
              skip_back: true,
              skip_on_thumbs_down: true
          }

          videojs('myPlayer').ready(function () {
              var myPlayer = this;
              myPlayer.irisTvBrightcovePlugin(playerOptions);
          })
      </script>

      Once these are added, the player is ready to go. Here's an example of the entire HTML:

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Brightcove Carousel Rec</title>

          <link rel="stylesheet" type="text/css" href="https://s3.amazonaws.com/iris-playground/cosmos/styles/iris-bc.adaptive.css">
          <!--[if lt IE 9]>
              <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script>
          <![endif]-->
      </head>

      <body>
          <div id="test_video_container">
              <video id="myPlayer"
                      data-account="1736779881001"
                      data-player="BklJOrErO"
                      data-video-id="2813035617001"
                      data-embed="default"
                      class="video-js"
                      controls
                      width="100%"
                      height="300px">
              </video>
          </div>

          <script src="https://players.brightcove.net/1736779881001/BklJOrErO_default/index.min.js"></script>
          <script src="https://s3.amazonaws.com/iris-playground/cosmos/plugins/iris-bc.adaptive.js" type="text/javascript"></script>

           <script>
              var playerOptions = {
                  campaign_tracking: true,
                  global: "iris_player",
                  perform_player: false,
                  start_up_next: true,
                  start_up_next_time: 14,
                  end_up_next: true,
                  end_up_next_text: "RECOMMENDED: ",
                  end_up_next_time: 10,
                  thumbs_up: true,
                  thumbs_down: true,
                  skip_forward: true,
                  skip_back: true,
                  skip_on_thumbs_down: true,
                  set_cookie: true,
                  carousel_recs: true,
                  user_id: "test1234User-id"
              }

              videojs('myPlayer').ready(function () {
                  var myPlayer = this;
                  myPlayer.irisTvBrightcovePlugin(playerOptions);
              })
          </script>
      </body>
      </html>