Articles in this section

See more

THEOplayer

Avatar
Tony Gentile
  • Updated
Follow

These are the steps to include your customized collection beacon that will connect to the Datazoom cloud SDK from THEOplayer video player:

Login to Datazoom here:  https://app.datazoom.io

Add a Collector as indicated here:  How to add a Collector

Copy the CONFIG ID to be used in the subsequent steps

You will see this message:

Plugin Integration

Datazoom provides plugins for data collection through our Beacon Services. Integrate the THEOplayer 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 a THEOplayer

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

datazoom_context = datazoom.createContext(theo_player);

For example:

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" type="text/css"
        href="https://cdn.myth.theoplayer.com/60b5ca02-a9e7-42b3-aab8-e008a4dfece4/ui.css">
    <!-- THE THEO PLAYER CDN -->
    <script src="https://cdn.myth.theoplayer.com/60b5ca02-a9e7-42b3-aab8-e008a4dfece4/THEOplayer.js"></script>
    <!-- THE DATAZOOM BEACON SCRIPT -->
    <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>
</head>

<body>

    <div>
        <div id="video" style="width:50%">
            <div class="video-js theoplayer-skin vjs-16-9"></div>
        </div>
    </div>

    <script>
        var theo_player;
        var datazoom_context;

        var url = "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd";

        // Create a Player instance and replace license with your license key.
        theo_player = new THEOplayer.Player(document.getElementById("video").children[0], {
            libraryLocation: "https://cdn.myth.theoplayer.com/60b5ca02-a9e7-42b3-aab8-e008a4dfece4/",
            license: "xxxxx-xxxxxx-xxxxx-xxxxxxx-xxx"
        });

        theo_player.source = {
            sources: [{
                src: url,
                type: "application/dash+xml"
            }]
        };
        //Activates data collection
        datazoom_context = datazoom.createContext(theo_player);
    </script>

</body>

</html>

References:

THEOplayer API Doc : https://docs.theoplayer.com/getting-started/01-sdks/01-web/00-getting-started.md

Related articles

Comments

0 comments

Article is closed for comments.