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.
Activate Data Collection for a Bitmovin Player
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);
bitmovin_player.load(source).then(
player => {
console.log('Successfully created Bitmovin Player instance')
},
reason => {
console.log('Error while creating Bitmovin Player instance')
}
);
//Activates data collection
datazoom_context = datazoom.createContext(bitmovin_player);
</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.