Datazoom is a high-availability real-time data collection solution. This document summarizes how to integrate the Dailymotion video player with the Datazoom platform.
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
Plugin Integration
Datazoom provides plugins for data collection through our Beacon Services. Integrate the Dailymotion 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_ID
value with the collector configuration ID.
This inserts Datazoom's data collection SDK into the page.
Activate Data Collection for a Dailymotion
To activate data collection for a Dailymotion instance, create a Datazoom context which references the player instance with the following snippet:
datazoom_context = datazoom.createContext(dm_player);
For example:
<!DOCTYPE html> <html lang="en"> <head> <script src="https://geo.dailymotion.com/libs/player.js"></script> <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script> </head> <body> <div> <div id="video" style="width:50%"></div> <hr/> <button id="create">Create</button> <button id="destroy">Destroy</button> </div> <script> var dm_player; var datazoom_context; document.getElementById("create").onclick = function() { dailymotion.createPlayer("video", { video: "k6B6qj2CaIw4Xbzv767" }).then( player => { dm_player = player; datazoom_context = datazoom.createContext(dm_player); }, error => { console.error(error); } ); }; </script> </body> </html>
Option 2: Activate Data Collection for an embed Dailymotion Player
For example:
<!DOCTYPE html> <html lang="en"> <head> <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=CONFIG_ID'></script> </head> <body> <div> <div id="player-container" style="width:50%"></div> <script src="https://geo.dailymotion.com/player/xgt7i.js" data-video="k6B6qj2CaIw4Xbzv767"> </script> </div> <script> var dm_player; var datazoom_context; document.addEventListener("DOMContentLoaded", () => { dailymotion.getPlayer().then(player => { if (player) { dm_player = player; datazoom_context = datazoom.createContext(dm_player); } else { console.error("Dailymotion player object not found."); } }); }); </script> </body> </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:
document.getElementById("destroy").onclick = function() { if (dm_player) { dm_player.destroy(); dm_player = null; } if (datazoom_context) { datazoom_context.destroy(); datazoom_context = null; } };
NPM (Node Package Manager)
We have made it convenient to manage your Dailymotion Collector integration by providing NPM (Node Package Manager) support. Please see installation details here.
References:
Dailymotion Player Doc : https://developers.dailymotion.com/player/#player
Comments
0 comments
Article is closed for comments.