HLS.js (Web)

Integrate Gumlet insights with HLS.js player and monitor video playback performance.

HLS.js is a popular player to play videos on the web.

Step 1: Install Library

First of all, you need to install Gumlet insights SDK to your web app that includes video. Easiest way is to include via Gumleth-hosted version.

<script src="https://cdn.gumlytics.com/insights/1.0/gumlet-insights.min.js"></script>

Step 2: Initialize Gumlet Insights

You will need property_id to track data. Please go to Property List page and copy Property ID value.

Now, you can initialize HLS.js like the way you normally do. After that, you need to register Gumlet insights SDK.

<script type="text/javascript">

  var video = document.getElementById('my-video');
  var time = new Date().getTime();
  var hls = new Hls({
    // disable preload
    autoStartLoad: false
  });

  /* now you need to initialize gumlet insights */
  var gumletConfig = {
    property_id: 'PROPERTY_ID_GOES_HERE', // required:  please replace with correct property id.
    videoId: 'video_1', // optional: this identifies video
    userId: 'customer_1' // optional: this identifies user
  };

  var gumletInsights = gumlet.insights(gumletConfig);
  gumletInsights.register(hls);
  
  hls.attachMedia(video);
  hls.loadSource('VIDEO_URL');

</script>

Step 3: Add Relevant Data (optional)

Only required field to pass in config is property_id. You can pass more data by specifying following config properties.

var gumletConfig = {
   property_id: 'PROPERTY_ID_GOES_HERE', // required:  please replace with correct property id.
   videoId: '',
   userId: ''
 };

👍

Done!

Once you integrate with these steps, you should start seeing data on views page.


Did this page help you?