Brightcove Adaptive Plugin -- Not Bundled within Brightcove Player

Owned by Zachary Stockton
Last updated: Mar 08, 2019
4 min read


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. More details on these options can be found here: UI Settings and Customization Options. 

Note: The Brightcove Account ID will be used it no client_token is added in playerOptions.

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






IRIS.TV