Brightcove Player

Datazoom is a high-availability real-time data collection solution. This document summarizes how to integrate the Brightcove video player with the Datazoom platform. These instructions are specific to the In-Page embed code method outlined here: https://player.support.brightcove.com/publish/choosing-correct-embed-code.html

Login to Datazoom here: https://app.datazoom.io
Add a Collector as indicated here: How to add a Collector
Copy the Config that was created at the end of the process
Click the icon indicated below to copy the Configuration Key

You will see this message:
Replace the <CONFIG_ID> in Datazoom's beacon script with the Key you copied above.
Replace the entire placeholder <CONFIG_ID> including < and >

IMPORTANT:

Datazoom's SDK script must be placed before the player load.

Examples:

Replace the ACCOUNT_ID with your Brightcove account ID.
Replace the PLAYER_ID with your Brightcove player ID.
Replace the VIDEO_ID with your Brightcove videoID.

Use Case 1
While integrating Datazoom on your page, it's necessary to identify the source video player the SDK will interface with. By default the SDK will look for a player instance named dz_brightcove but this value can be overwritten by calling the dz_setPlayerInstance method. Replace the value any_name in the sample code below with your unique player instance name that matches how you've identified the player on the page; the Datazoom SDK will collect data from the identified player instance.

<html>

<body>
    <!-- Video Player -->
    <video-js id='any_name' data-account='ACCOUNT_ID' data-player='PLAYER_ID' data-embed='default' data-application-id='' class='video-js' controls='' width="1920" height="1080"></video-js>

    <script src='https://players.brightcove.net/ACCOUNT_ID/PLAYER_ID_default/index.min.js'></script>

    <!-- THIS IS THE DATAZOOM BEACON SCRIPT -->
    <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=<CONFIG_ID>'></script>

    <script>
        bcplayer = videojs("any_name");
        if (typeof dz_setPlayerInstance === 'function') {
            dz_setPlayerInstance(bcplayer);
        }
        bcplayer.ready();
        bcplayer.catalog.getVideo('VIDEO_ID', function (onerr, vid) {
            bcplayer.catalog.load(vid);
        });
    </script>

</body>

</html>

Use Case 2
If you have several players on the page you can dynamically instruct the SDK to switch its focus by calling the dz_setPlayerInstance method. After calling this method again to declare a new player instance, the SDK will begin collecting data from this newly identified player.

<html>

<body>
    <!-- First Video Player -->
    <video-js id='first_video_player_name' data-account='ACCOUNT_ID' data-player='PLAYER_ID' data-embed='default' data-application-id='' class='video-js' controls='' width="1920" height="1080"></video-js>

    <script src='https://players.brightcove.net/ACCOUNT_ID/PLAYER_ID_default/index.min.js'></script>

    <!-- Second Video Player-->
    <video-js id='any_name' data-account='ACCOUNT_ID' data-player='PLAYER_ID' data-embed='default' data-application-id='' class='video-js' controls='' width="1920" height="1080"></video-js>

    <script src='https://players.brightcove.net/ACCOUNT_ID/PLAYER_ID_default/index.min.js'></script>

    <!-- THIS IS THE DATAZOOM BEACON SCRIPT -->
    <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=<CONFIG_ID>'></script>

    <script>
        player1 = videojs("first_video_player_name");
        player1.ready();
        player1.catalog.getVideo('VIDEO_ID', function (onerr, vid) {
            player1.catalog.load(vid);
        });
        player2 = videojs("any_name");
        player2.ready();
        if (typeof dz_setPlayerInstance === 'function') {
            dz_setPlayerInstance(player2);
        }
        player2.catalog.getVideo('VIDEO_ID', function (onerr, vid) {
            player2.catalog.load(vid);
        });
    </script>

</body>

</html>

Use Case 3
The Datazoom SDK can be installed on a page without a video player and instructed to collect custom events and metadata from page level events.

<html>

<body>
    <script>
        var custom = function () {
            setTimeout(function () {
                if (typeof generateDatazoomEvent === "function") {
                    setDatazoomMetadata([{ MetadataName1: "MetadataValue1" }, { MetadataName2: "MetadataValue2" }]);
                    generateDatazoomEvent("ButtonPush");
                } else {
                    custom();
                }
            }, 50);
        };
    </script>
    <button onclick="custom()">Click me</button>
</body>

</html>

Articles in this section

Comments

Articles in this section

Related articles