These are the steps to include your customized collection beacon that will connect to the Datazoom cloud SDK from your Bitmovin 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 Bitmovin 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_IDvalue 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:
datazoom_context = datazoom.createContext(bitmovin_player);
For example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- THE BITMOVIN PLAYER CDN -->
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>
<!-- THE DATAZOOM BEACON SCRIPT -->
<script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>
</head>
<body>
<div id="my-player" style="width:50%"></div>
<script type="text/javascript">
var bitmovin_player;
var datazoom_context;
// Replace with your license key
const playerConfig = {
key: 'xxxx-xxxxx-xxxxxx-xxxxxx-xxxxx'
};
const container = document.getElementById('my-player');
const source = {
title: "Getting Started with the Bitmovin Player",
description: "Now you are ready to embed the Bitmovin Player into your own website :)",
dash: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
hls: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
progressive: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4',
poster: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg'
};
// Create a player instance
bitmovin_player = new bitmovin.player.Player(container, playerConfig);
// Activate data collection
datazoom_context = datazoom.createContext(bitmovin_player);
// Load the media source to start playback
bitmovin_player.load(source);
</script>
</body>
</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:
datazoom.createContextAndPlayer(container, playerConfig).then(
function(context) {
bitmovin_player = context.getPlayer();
datazoom_context = context;
// Load the media source to start playback
bitmovin_player.load(source);
}
);
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- THE BITMOVIN PLAYER CDN -->
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>
<!-- THE DATAZOOM BEACON SCRIPT -->
<script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script>
</head>
<body>
<div id="my-player" style="width:50%"></div>
<script type="text/javascript">
var bitmovin_player;
var datazoom_context;
// Replace with your license key
const playerConfig = {
key: 'xxxx-xxxxx-xxxxxx-xxxxxx-xxxxx'
};
const container = document.getElementById('my-player');
const source = {
title: "Getting Started with the Bitmovin Player",
description: "Now you are ready to embed the Bitmovin Player into your own website :)",
dash: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
hls: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
progressive: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/MI201109210084_mpeg-4_hd_high_1080p25_10mbits.mp4',
poster: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg'
};
// Activate data collection and create a player instance
datazoom.createContextAndPlayer(container, playerConfig).then(
function(context) {
bitmovin_player = context.getPlayer();
datazoom_context = context;
// Load the media source to start playback
bitmovin_player.load(source);
}
);
</script>
</body>
</html>
References:
Bitmovin Player API Doc : https://bitmovin.com/docs/player/tutorials/get-started-with-the-bitmovin-player
Comments
0 comments
Article is closed for comments.