Logo

Application collectors

Brightcove Media Player

v2.22.0 • For the Javascript Collector

The Brightcove Media Player Extension is a configuration option for the Javascript Collector by Datazoom that makes the following additional data points automatically collectable in real time.

Integration Instructions

These instructions are specific to the In-Page embed code method outlined here: https://player.support.brightcove.com/publish/choosing-correct-embed-code.html

Plugin Integration

Datazoom provides plugins for data collection through our Beacon Services. Integrate the Brightcove plugin into your web application with the following snippet:

<script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>

  • Insert this JS line into your HTML

  • Replace the CONFIG_ID value with the collector configuration ID.

This inserts Datazoom's data collection SDK into the page.

Activate Data Collection for Brightcove

To activate data collection for a Brightcove player instance, create a Datazoom context which references the player instance with the following snippet:

datazoom_context = datazoom.createContext(brightcove_player);

For example:

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- THE DATAZOOM BEACON SCRIPT -->
    <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>
    <style>
        /* Make player fill outer div */
        .video-js {
            height: 100%;
            width: 100%;
        }

        /* Build outer div size of player */
        .outer {
            width: 610px;
            height: 344px;
            border: 1px solid blue;
            position: relative;
        }
    </style>
</head>

<body>

    <div id="playerContainer" class="outer">
        <video-js id="myPlayerID" data-video-id="6116779877001" data-account="1507807800001" data-player="rf1BTdKk6M"
            data-embed="default" data-application-id class="video-js" controls playsinline></video-js>
    </div>
    
    <!-- THE BRIGHTCOVE CDN -->
    <script src="https://players.brightcove.net/1507807800001/rf1BTdKk6M_default/index.min.js"></script>

    <script type="text/javascript">
        // Create a MediaPlayer and initialize it.
        var brightcove_player = videojs.getPlayer('myPlayerID');
        
        // Activates data collection
        var datazoom_context = datazoom.createContext(brightcove_player);
    </script>

</body>

</html>

Stop Data Collection

If the data collection must be stopped for any reason, for example after the destruction of the corresponding player instance, invoke the destroy() method of the Datazoom context object as in the following example:

if (brightcove_player) {
    brightcove_player.dispose();
    brightcove_player = null;
}

if (datazoom_context) {
    datazoom_context.destroy();
    datazoom_context = null;
}

NPM (Node Package Manager)

We have made it convenient to manage your Brightcove Collector integration by providing NPM (Node Package Manager) support. Please see installation details here.

References:

Brightcove Player API Doc : https://player.support.brightcove.com/brightcove-player/current-release/index.html

Brightcove In-Page embed Doc: https://player.support.brightcove.com/publish/choosing-correct-embed-code.html


Ad Frameworks Extensions

If your Javascript application has a media player with an ad framework, Datazoom’s Javascript Collector with a Brightcove Media Player can be extended with the following ad framework extensions.

Previous
Bitmovin Media Player
Next
Google IMA Ad Framework