Brightcove Player Plugin with Brightcove Video Cloud

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.

Brightcove Video Cloud Studio Settings

PLUGINS

Adding the Brightcove Plugin

1. Install the following JavaScript Plugin in the Player Plugin section:

Add the following URL under Plugins > JavaScript:

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

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.

2. Install the CSS in the Player Plugin section: 

Add the following URL under Plugins > CSS:

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

3. Install the JSON References in the Player Plugin section:

Add the following under Plugins > Name, Options: 

Name the plugin option: 

pluginDev

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

Add the following plugin option:

{

"overlayText": "This data is supplied at initialization",

  "start_up_next": true,

  "end_up_next": true,

  "ssl" : true

}

An example of the plugin options with Up Next and SSL set to true:

Additional customizations can be added to this section, such as customizing the start_up_next_text. 

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

In https://studio.brightcove.com/ set Endscreen to Disabled:

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 pluginDev 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.pluginDev(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.pluginDev(playerOptions);
        })
    </script>
</body>
</html>