video.js

These are the steps to include your customized collection beacon that will connect to the Datazoom cloud SDK from your video.js based 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.

Example:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://vjs.zencdn.net/6.6.3/video-js.css">
        <script src="http://vjs.zencdn.net/6.6.3/video.js"></script>
    </head>
 
    <body>
        <div class="vid-container" id="video_js">
            <video id="my-video" class="video-js" controls preload="auto" style="width:100%;height:40em;">
                <source src="<VIDEO_SOURCE>" type="video/mp4">
            </video>
        </div>
		<script>
		var player = videojs('my-video');
		</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