HTML5 video element library

Introduction

HTML5 is general library, which use HTML5 video tag for tracking playback info. It needs: HTML5 video element and configuration JSON object . This library connects to video element and monitors playback process. It sends data during playback to bradmax analytics platform.

This library can be used, when you use native video element or player, which simply “wraps” video element.

Library 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

Library API

Class: bradmax.analytics.Html5

FieldDescription
bradmaxAnalyticsLibrary object, which sends data to bradmax analytics platform
mediaElementAssociated video element
MethodsDescription
constructor(videoElement, configuration: Object)creates API object with selected video element and JSON configuration object.
destroy()Destroys API (disconnects from video element and performs clean up operations).

Minimal example

Initial steps:

  1. Download bradmax.analytics.js file (see above)
  2. Check clientToken in bradmax client panel (https://bradmax.com/client/panel/ > Analytics > Info > clientToken).
  3. Prepare HTML file
  • Create HTML file with content from below example.
  • Set right path to downloaded bradmax.analytics.js plugin file (below path “https://example.com/bradmax.analytics.js” is used).
  • Replace client token below (“SJnO!AzdDggLdOyAIdBg5DIjjeIOMAFd9gADV”) by your one.
<!DOCTYPE html>
<html>
<head>
    <title>HTML5 / Bradmax analytics</title>

    <!-- Bradmax analytics -->
    <script src="https://example.com/bradmax.analytics.js"></script>
    <script>
    function initApp() {
        var element = document.getElementById("video");
        var config = {
            clientToken: "SJnO!AzdDggLdOyAIdBg5DIjjeIOMAFd9gADV"
        };
        var api = new bradmax.analytics.Html5(element, config);
    }

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

    <!-- HTML5 video tag -->
    <video id="video" controls poster="https://bradmax.com/static/images/startsplash.jpg" width="600" height="400" src="https://bradmax.com/static/video/tears_of_steel.mp4">
    </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

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 / Bradmax analytics</title>

    <!-- Bradmax analytics -->
    <script src="bradmax.analytics.js"></script>
    <script>
    function initApp() {
        var element = document.getElementById("video");
        var config = {
            clientToken: "SJnO!AzdDggLdOyAIdBg5DIjjeIOMAFd9gADV",
            mediaMetadata: {
                materialId: "701",
                relatedId: "7001",
                duration: 734,
                title: "Tears of Steel",
                tags: ["test", "entertaiment"]
            }
        };
        var api = new bradmax.analytics.Html5(element, config);
    }

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

    <!-- HTML5 video tag -->
    <video id="video" controls poster="https://bradmax.com/static/images/startsplash.jpg" width="600" height="400" src="https://bradmax.com/static/video/tears_of_steel.mp4">
    </video>
</body>
</html>

Tracking engagement rate example

It is only needed to add parameter

trackEngagementRate: true

into configuration object.

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 / Bradmax analytics</title>

    <!-- Bradmax analytics -->
    <script src="bradmax.analytics.js"></script>
    <script>
    function initApp() {
        var element = document.getElementById("video");
        var config = {
            clientToken: "SJnO!AzdDggLdOyAIdBg5DIjjeIOMAFd9gADV",
            trackEngagementRate: true,
            mediaMetadata: {
                materialId: "701",
                relatedId: "7001",
                duration: 734,
                title: "Tears of Steel",
                tags: ["test", "entertaiment"]
            }
        };
        var api = new bradmax.analytics.Html5(element, config);
    }

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

    <!-- HTML5 video tag -->
    <video id="video" controls poster="https://bradmax.com/static/images/startsplash.jpg" width="600" height="400" src="https://bradmax.com/static/video/tears_of_steel.mp4">
    </video>
</body>
</html>

Tracking realtime statistics example

It is only needed to add parameter

trackRealtimeStats: true

into configuration object.

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 / Bradmax analytics</title>

    <!-- Bradmax analytics -->
    <script src="bradmax.analytics.js"></script>
    <script>
    function initApp() {
        var element = document.getElementById("video");
        var config = {
            clientToken: "SJnO!AzdDggLdOyAIdBg5DIjjeIOMAFd9gADV",
            trackEngagementRate: true,
            trackRealtimeStats: true
            mediaMetadata: {
                materialId: "701",
                relatedId: "7001",
                duration: 734,
                title: "Tears of Steel",
                tags: ["test", "entertaiment"]
            }
        };
        var api = new bradmax.analytics.Html5(element, config);
    }

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

    <!-- HTML5 video tag -->
    <video id="video" controls poster="https://bradmax.com/static/images/startsplash.jpg" width="600" height="400" src="https://bradmax.com/static/video/tears_of_steel.mp4">
    </video>
</body>
</html>
Jump to