Articles in this section

See more

Shaka

Avatar
Tony Gentile
  • Updated
Follow

These are the steps to include your customized collection beacon that will connect to the Datazoom cloud SDK from your Shaka 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 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.

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

  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>

References:

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

Related articles

Comments

0 comments

Article is closed for comments.