HLS.js

These are the steps to include your customized collection beacon that will connect to the Datazoom cloud SDK from your HLS.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>
        <!-- For updates please visit https://github.com/video-dev/hls.js/** -->
        <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    </head>
    
    <body>
    
        <div id="player">
            <video id="<VIDEO_TAG_ID>" controls preload="auto" poster="YOUR POSTER IMAGE" src="YOUR VIDEO SOURCE"  type="application/x-mpegURL">
            </video>
        </div>
        
        <script>
        var video = document.getElementById('<VIDEO_TAG_ID>');
             var hls; //Must be declared globally*
             if(Hls.isSupported()) {
               hls = new Hls();
               hls.loadSource(video.src);
               hls.attachMedia(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