These are the steps to include your customized collection beacon that will connect to the Datazoom cloud SDK from your Shaka 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 that was created at the end of the process
You will see this message:
Example:
Plugin Integration
Datazoom provides plugins for data collection through our Beacon Services. Integrate the Shaka 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 Shaka Player
context = datazoom.createContext(player);
for example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shaka Player</title>
<!-- THE SHAKA PLAYER CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/3.0.3/shaka-player.compiled.js"></script>
<!-- THE DATAZOOM BEACON SCRIPT -->
<script src="https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID"></script>
</head>
<body>
<p>
This example demonstrates the basic use of the Datazoom SDK with the SHAKA
player
</p>
<video
id="video"
width="640"
height="360"
title="Football Video"
type="video/mp4"
controls
></video>
<script>
var context;
async function initPlayer() {
// CHANGE the VALUE of the videoURL variable//
var videoURL = "https://example.com/vod/example.mp4";
var video = document.getElementById("video");
const player = new shaka.Player(video);
window.player = player;
//Activates Datazoom Data Collection
context = datazoom.createContext(player);
try {
await player.load(videoURL);
console.log("The video has now been loaded!");
} catch (e) {
console.log(e);
}
}
function initApp() {
shaka.polyfill.installAll();
if (shaka.Player.isBrowserSupported()) {
initPlayer();
} else console.error("Browser not supported!");
}
initApp();
</script>
</body>
</html>
References:
Shaka Player API Doc : https://shaka-player-demo.appspot.com/docs/api/tutorial-welcome.html
Comments
0 comments
Article is closed for comments.