Video.js player plugin

Introduction

Bradmax analytics supports plugin for Video.js player, which collects playback information and sends it to bradmax platform. Reports about video usage from collected data is presented in bradmax client panel (https://bradmax.com/client/panel/).

Integration of bradmax analytics statistics with Video.js player is quick and easy process. It needs only plugin file and some additional configuration for player. See example below.

Plugin file

Raw JavaScript file: https://bradmax.com/static/bradmax-analytics-for-players/latest/bradmax.analytics.js

Zipped JavaScript file: https://bradmax.com/static/bradmax-analytics-for-players/latest/bradmax.analytics.zip

Minimal example

Initial steps:

  1. Download bradmax.analytics.js plugin file (see above)
  2. Check clientToken in bradmax client panel (https://bradmax.com/client/panel/ > Analytics > Info > clientToken).
  3. Prepare HTML file
<!DOCTYPE html>
<html>
<head>
    <title>VideoJs / Bradmax analytics</title>

    <!-- Video.js player files -->
    <link href="https://example.com/video-js.css" rel="stylesheet">
    <script src="https://example.comt/video.js"></script>

    <!-- Bradmax analytics plugin file -->
    <script src="https://example.com/bradmax.analytics.js"></script>

    <!-- Your application source: -->
    <script>
    function initApp() {
        var bradmaxAnalyticsOptions = {
            clientToken: "SJnO!AzdDggLdOyAIdBg5DIjjeIOMAFd9gADV"
        };
        var playerOptions = {
            plugins: { bradmaxAnalytics: bradmaxAnalyticsOptions }
        };
        var player = videojs('my-player', playerOptions, onPlayerReady);
    }

    function onPlayerReady() {
        videojs.log('Your player is ready!');
    }

    document.addEventListener('DOMContentLoaded', initApp);
    </script>
</head>
<body>
    <h2>VideoJs / Bradmax analytics</h2>

    <video id="my-player" class="video-js" controls poster="https://bradmax.com/static/images/startsplash.jpg">
        <source src="https://bradmax.com/static/video/tears_of_steel.mp4" type="video/mp4"></source>
    </video>
</body>
</html>

Example above will track only general information about playback and only: Audience, Technology and Geo reports will be available.

Tracking video details example

Parameter “mediaMetadata” has to be added into configuration object. See example below. More info about mediaMetadata

var bradmaxAnalyticsOptions = {
    clientToken: "SJnO!AzdDggLdOyAIdBg5DIjjeIOMAFd9gADV",
    mediaMetadata: {
        materialId: "701",
        relatedId: "7001",
        duration: 734,
        title: "Tears of steel",
        tags: ["test", "entertaiment"]
    }
};

Tracking engagement rate example

It is only needed to add parameter

trackEngagementRate: true

into configuration object.

var bradmaxAnalyticsOptions = {
    clientToken: "SJnO!AzdDggLdOyAIdBg5DIjjeIOMAFd9gADV",
    trackEngagementRate: true,
    mediaMetadata: {
        materialId: "701",
        relatedId: "7001",
        duration: 734,
        title: "Tears of steel",
        tags: ["test", "entertaiment"]
    }
};

Tracking realtime statistics example

It is only needed to add parameter

trackRealtimeStats: true

into configuration object.

var bradmaxAnalyticsOptions = {
    clientToken: "SJnO!AzdDggLdOyAIdBg5DIjjeIOMAFd9gADV",
    trackEngagementRate: true,
    trackRealtimeStats: true,
    mediaMetadata: {
        materialId: "701",
        relatedId: "7001",
        duration: 734,
        title: "Tears of steel",
        tags: ["test", "entertaiment"]
    }
};
Jump to