Articles in this section

See more

video.js

Avatar
Tony Gentile
  • Updated
Follow

Datazoom is a high-availability real-time data collection solution. This document summarizes how to integrate the video.js player with the Datazoom platform.


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

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

  3. Copy the Config that was created at the end of the process
    Click the icon indicated below to copy the Configuration Key

Plugin Integration

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

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

datazoom_context = datazoom.createContext(vjs_player);

For example:

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

<head>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/video.js/dist/video-js.min.css">
    <!-- THE VIDEO.JS CDN -->
    <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
    <!-- THE DATAZOOM BEACON SCRIPT -->
    <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>
</head>

<body>

    <div>
        <div style="position:relative;width:640px;height:360px">
            <video id="video" class="video-js vjs-16-9 vjs-big-play-centered" controls></video>
        </div>
        <button id="create">Create</button>
    </div>

    <script>
        var vjs_player;
        var datazoom_context;

        var media_element = document.getElementById("video");

        document.getElementById("create").onclick = function () {
            var url =
                "https://devstreaming-cdn.apple.com/videos/streaming/examples/bipbop_16x9/bipbop_16x9_variant.m3u8"
            var type = "application/x-mpegURL"
            // Create a MediaPlayer and initialize it.
            vjs_player = videojs("video", {}, function () {
                // Activates data collection
                datazoom_context = datazoom.createContext(vjs_player);
                vjs_player.src({
                    src: url,
                    type: type
                });
            });
        };
    </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 (vjs_player) {
    vjs_player.dispose();
    vjs_player = null;
}

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

References:

Video.js Player API Doc : https://docs.videojs.com/

Related articles

Comments

0 comments

Article is closed for comments.