Logo

Application collectors

Bitmovin Media Player

v2.28.0 • For the Javascript Collector

The Bitmovin 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 Bitmovin Player plugin into your web application with the following snippet:

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

Option 1: Activate Data Collection for an Existing Bitmovin Player Instance

This is the standard option for customers who only need to collect data from the video player and are not concerned with joining player events with CDN logs or sending CMCD data to a CDN.

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

1datazoom_context = datazoom.createContext(bitmovin_player);

For example:

1<!DOCTYPE html>2<html>34<head>5    <meta charset=&quot;utf-8&quot;>6    <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; />7    <!-- THE BITMOVIN PLAYER CDN -->8    <script type=&quot;text/javascript&quot; src=&quot;https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js&quot;></script>9    <!-- THE DATAZOOM BEACON SCRIPT -->10    <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>11</head>1213<body>14    <div id=&quot;my-player&quot; style=&quot;width:50%&quot;></div>15    <script type=&quot;text/javascript&quot;>16        var bitmovin_player;17        var datazoom_context;18        // Replace with your license key19        const playerConfig = {20            key: 'xxxx-xxxxx-xxxxxx-xxxxxx-xxxxx'21        };22        const container = document.getElementById('my-player');23        const source = {24            title: &quot;Getting Started with the Bitmovin Player&quot;,25            description: &quot;Now you are ready to embed the Bitmovin Player into your own website :)&quot;,26            dash: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',27            hls: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',28            progressive: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4',29            poster: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg'30        };31        // Create a player instance32        bitmovin_player = new bitmovin.player.Player(container, playerConfig);33        // Activate data collection34        datazoom_context = datazoom.createContext(bitmovin_player);3536        // Load the media source to start playback37        bitmovin_player.load(source);38    </script>39</body>4041</html>

Option 2: Have Datazoom Create a Bitmovin Player with Data Collection Activated

This option is necessary if you are joining Player & CDN Log data together or want to send CMCD data to a CDN. In this option, Datazoom will handle instantiation of the player with the necessary hooks required to insert parameters like Content Session ID & Request ID in every media request the player makes.

A Bitmovin player instance can be created with Datazoom data collection activated, using the following snippet:

1datazoom.createContextAndPlayer(container, playerConfig).then(2    function(context) {3        bitmovin_player = context.getPlayer();4        datazoom_context = context;56        // Load the media source to start playback7        bitmovin_player.load(source);8    }9);

By creating a player instance through the datazoom.createContextAndPlayer() method, it enables Datazoom to collect more player information to assist QoE monitoring and distributed tracing.

For example:

1<!DOCTYPE html>2<html>34<head>5    <meta charset=&quot;utf-8&quot;>6    <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; />7    <!-- THE BITMOVIN PLAYER CDN -->8    <script type=&quot;text/javascript&quot; src=&quot;https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js&quot;></script>9    <!-- THE DATAZOOM BEACON SCRIPT -->10    <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>11</head>1213<body>14    <div id=&quot;my-player&quot; style=&quot;width:50%&quot;></div>15    <script type=&quot;text/javascript&quot;>16        var bitmovin_player;17        var datazoom_context;18        // Replace with your license key19        const playerConfig = {20            key: 'xxxx-xxxxx-xxxxxx-xxxxxx-xxxxx'21        };22        const container = document.getElementById('my-player');23        const source = {24            title: &quot;Getting Started with the Bitmovin Player&quot;,25            description: &quot;Now you are ready to embed the Bitmovin Player into your own website :)&quot;,26            dash: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',27            hls: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',28            progressive: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4',29            poster: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg'30        };31        // Activate data collection and create a player instance32        datazoom.createContextAndPlayer(container, playerConfig).then(33            function(context) {34                bitmovin_player = context.getPlayer();35                datazoom_context = context;3637                // Load the media source to start playback38                bitmovin_player.load(source);39            }40        );41    </script>42</body>4344</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:

1if (bitmovin_player) {2    bitmovin_player.destroy();3    bitmovin_player = null;4}56if (datazoom_context) {7    datazoom_context.destroy();8    datazoom_context = null;9}

NPM (Node Package Manager)

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

References:

Bitmovin Player API Doc : https://bitmovin.com/docs/player/tutorials/get-started-with-the-bitmovin-player



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 Bitmovin Media Player can be extended with the following ad framework extensions.

Supported Features

Previous
AWS IVS Media Player
Next
Google IMA Ad Framework