THEOplayer

These are the steps to include your customized collection beacon that will connect to the Datazoom cloud SDK from THEOplayer video player:

Login to Datazoom here: https://app.datazoom.io
Add a Collector as indicated here: How to add a Collector
Copy the Config that was created at the end of the process
Click the icon indicated below to copy the Configuration Key

You will see this message:
Replace the <CONFIG_ID> in Datazoom's beacon script with the Key you copied above.
Replace the entire placeholder <CONFIG_ID> including < and >

IMPORTANT :

Datazoom's beacon script must come after the player load.
The name of the THEOPlayer instance created should be same as 'app_theoplayer' in order to have the access to the object that was used to create the player for accessing some of the properties of the video being played.

<html>
	<head>	
		<link rel="stylesheet" type="text/css" href="https://cdn.myth.theoplayer.com/YOUR_LICENSE/ui.css">
		<script src="https://cdn.myth.theoplayer.com/YOUR_LICENSE/THEOplayer.js"></script>
	</head>
	<body>
		<div class=" theoplayer-container video-js theoplayer-skin theo-seekbar-above-controls">
		        <div id="player">
		        </div>
        	</div>
		<script>
			var element = document.querySelector('.theoplayer-container') // fetch THEOplayer container div
 			var app_theoplayer = new THEOplayer.Player(element, { // instantiates video player
     				libraryLocation : 'https://cdn.myth.theoplayer.com/YOUR_LICENSE/',// references folder containing your THEOplayer library files (theoplayer.p.js, THEOplayer.js, ...)
     				ui : {
					width: '<WIDTH>',
					height: '<HEIGHT>'
    				}
 			});
 			app_theoplayer.source = {
    				sources : [{
        				src : '<VIDEO_SRC>',
        				type : '<VIDEO_TYPE>'
    				}]    
			};
		</script>

	    <!-- THIS IS THE DATAZOOM BEACON SCRIPT -->
	    <script src='https://platform.datazoom.io/beacon/v1/config?configuration_id=<CONFIG ID>'></script>

    </body>

</html>

Articles in this section

Comments