Logo

Application collectors

Shaka Media Player

v2.26.0 • For the Javascript Collector

The Shaka 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

Plugin Integration

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

Additional Parameters

The Shaka Player plugin can be integrated into your HTML along with additional parameters. For example, the cmcd_mode parameter overrides the mode of transmitting CMCD data to CDN:

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

  1. Normally the CMCD data, if enabled, are transmitted to CDN as query strings on each of the request URLs. By specifying header for the cmcd_mode parameter as above, the same data are transmitted to CDN as HTTP headers instead.

  2. The CDN must be configured to support CORS preflight requests, in order to allow CMCD headers.

  3. The CONFIG_ID value above should be replaced with the collector configuration ID as usual.

Activate Data Collection for a Shaka Player

  1. Activate data collection by passing player instance only.

context = datazoom.createContext(player);

for example:

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

<head>
    <title>Shaka Player Test Video</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/shaka-player/3.1.0/controls.css">
    <!-- THE SHAKA PLAYER CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/shaka-player/3.1.0/shaka-player.ui.js"></script>
    <!-- THE DATAZOOM BEACON SCRIPT -->
    <script src="https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID"></script>
</head>

<body>
    <p>
        This example demonstrates the basic use of the Datazoom SDK with the SHAKA
        player
    </p>
    <div data-shaka-player-container style="max-width: 40em" data-shaka-player-cast-receiver-id="1BA79154">
        <video data-shaka-player id="video" style="width: 100%; height: 100%"></video>
    </div>
    <script>
        async function initPlayer() {
            var video_url = "https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd"
            const video = document.getElementById("video");
            var ui = video["ui"];;
            // Create a Controls instance.
            var controls = ui.getControls();
            // Create a Player instance.
            var player = controls.getPlayer();
            window.player = player;
            //Activates data collection
            datazoom.createContext(player);
            try {
                await player.load(video_url);
                // This runs if the asynchronous load is successful.
                console.log("The video has now been loaded!");
            } catch (e) {
                // onError is executed if the asynchronous load fails.
                onError(e);
            }
        }

        function initApp() {
            // Install built-in polyfills to patch browser incompatibilities.
            shaka.polyfill.installAll();
            // Check to see if the browser supports the basic APIs Shaka needs.
            if (shaka.Player.isBrowserSupported()) {
                // Everything looks good!
                document.addEventListener('shaka-ui-loaded', initPlayer);
            } else {
                // This browser does not have the minimum set of APIs we need.
                console.error("Browser not supported!");
            }
        }

        function onErrorEvent(event) {
            // Extract the shaka.util.Error object from the event.
            onError(event.detail);
        }

        function onError(error) {
            // Log the error.
            console.log("Error code", error.code, "object", error);
        }
        initApp();
    </script>
</body>

</html>

  1. Activate data collection by passing player instance and controls instance

context = datazoom.createContext({
    player: my_player,
    controls: my_controls
});

for example:

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

<head>
    <title>Shaka Player Test Video</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/shaka-player/3.1.0/controls.css">
    <!-- THE SHAKA PLAYER CDN -->
    <script src="https://ajax.googleapis.com/ajax/libs/shaka-player/3.1.0/shaka-player.ui.js"></script>
    <!-- THE DATAZOOM BEACON SCRIPT -->
    <script src="https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID"></script>

</head>

<body>
    <p>
        This example demonstrates the basic use of the Datazoom SDK with the SHAKA
        player
    </p>
    <div data-shaka-player-container style="max-width: 40em" data-shaka-player-cast-receiver-id="1BA79154">
        <video data-shaka-player id="video" style="width: 100%; height: 100%"></video>
    </div>
    <script>
        async function initPlayer() {
            const video = document.getElementById("video");
            var video_url = "https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd"
            var ui = video["ui"];
            // Create a Controls instance.
            var my_controls = ui.getControls();
            // Create a Player instance.
            var my_player = my_controls.getPlayer();
            window.my_player = my_player;
            datazoom.createContext({
                player: my_player,
                controls: my_controls
            });
            try {
                await my_player.load(video_url);
                // This runs if the asynchronous load is successful.
                console.log("The video has now been loaded!");
            } catch (e) {
                // onError is executed if the asynchronous load fails.
                onError(e);
            }
        }

        function initApp() {
            // Install built-in polyfills to patch browser incompatibilities.
            shaka.polyfill.installAll();
            // Check to see if the browser supports the basic APIs Shaka needs.
            if (shaka.Player.isBrowserSupported()) {
                // Everything looks good!
                document.addEventListener('shaka-ui-loaded', initPlayer);
            } else {
                // This browser does not have the minimum set of APIs we need.
                console.error("Browser not supported!");
            }
        }

        function onErrorEvent(event) {
            // Extract the shaka.util.Error object from the event.
            onError(event.detail);
        }

        function onError(error) {
            // Log the error.
            console.log("Error code", error.code, "object", error);
        }
        initApp();
    </script>
</body>

</html>

Start Content Session Explicitly

Once the Datazoom context object is initialized, normally the collector will start content session automatically when it detects the intent to start playback, based on listener-events from the player. However, in cases where this auto detection of content session start being inaccurate (for example, with Shaka player the HTML5 video play listener-events are fired after finishing loading of media data, which results in late detection of the playback intent), the Datazoom context object provides the startContentSession() method that the application can call to explicitly start a content session in a way tailored for the application. For example:

// If the video should auto play
function onPageLoad() {
    datazoom_context.startContentSession();
    ...
}

// If the video doesn't auto play
function onPlaybackButtonClick() {
    datazoom_context.startContentSession();
    ...
}

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 (my_player) {
    my_player.destroy();
    my_player = null;
}

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

NPM (Node Package Manager)

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

References:

Shaka Player API Doc : https://shaka-player-demo.appspot.com/docs/api/tutorial-welcome.html


CMCD Support

Datazoom provides two discrete settings that control CMCD data collection, one for a specific player event, “Media Object Request”, and one for the corresponding CDN log response.

Player Collector configuration options

Use this option to enable your configured CDN to collect and return CMCD data, contained in the CMCD node of the log line JSON

  • Off - no CMCD keys are passed

  • Lite - only the CMCD keys Session ID (sid) and Request ID (rid) are passed to the CDN via query parameter or request header with every “Media Object Request”.

  • Full - the full set of keys specified by the CMCD standard are passed to the CDN via query parameter or request header with every “Media Object Request”

    Screenshot 2024-04-18 at 1.49.13 PM.png

Bitmovin and JW Player support only the “Lite” setting above

Data Pipe configuration options

Select the CMCD data points you wish to be included in content requests.

  • Media Object Request - The video player will emit an event called “media_object_request” that will contain the selected CMCD keys below

  • CMCD keys - Select the CMCD keys you wish to have included with each Media Object Request

Ad Frameworks Extensions

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

Supported Features

Previous
Kaltura Media Player
Next
Google IMA Ad Framework