D3 Examples - This example shows how to record HTML5 Video Player usage stats with Keen IO. Make sure to include your Keen IO Project ID and Write Key. If you don't have a Keen IO account, create one here for free: http://keen.io/signup

xxxxxxxxxx
 
<html>
<head>
  <meta charset="utf-8">
  <script src="https://d26b395fwzu5fz.cloudfront.net/keen-tracking-1.0.1.js"></script>
</head>
<body>
  <!-- HTML5 Video Player -->
  <div>
    <button id="video-control">Play</button>
    <br><br>
    <video id="video-player" width="420">
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
      Your browser does not support HTML5 video.
    </video>
  </div>
  <script>
  /*
    Learn more about the HTML5 AV DOM Reference here:
    https://www.w3schools.com/tags/ref_av_dom.asp
​
    Learn more about keen-tracking.js here:
    https://github.com/keen/keen-tracking.js
  */
  document.addEventListener('DOMContentLoaded', function() {
    var control = document.getElementById('video-control');
    var player = document.getElementById('video-player');
​
    control.addEventListener('click', function(){
      if (player.paused) {
        player.play();
      }
      else {
        player.pause();
      }
    }, false);
​
    trackEvents(player);
  }, false);
​
  function trackEvents(player) {
    var client = new Keen({
      projectId: 'YOUR_KEEN_PROJECT_ID',
      writeKey: 'YOUR_KEEN_WRITE_KEY'
    });
​
    // These flags can help with local development
    Keen.debug = true;
    // Keen.enabled = false;
    client.on('recordEvent', console.log);
​
    client.extendEvents(function(){
      return {
        browser: Keen.helpers.getBrowserProfile(),
        player: {
          'is-muted': player.muted,
          'current-position': player.currentTime,
          'duration': player.duration,
          'volume': player.volume
        }
      }
    })
​
    player.addEventListener('play', function() {
      client.recordEvent('video-interaction', { event_type: 'started' });
    }, false);
​
    player.addEventListener('pause', function() {
      client.recordEvent('video-interaction', { event_type: 'paused' });
    }, false);
​
    player.addEventListener('ended', function() {
      client.recordEvent('video-interaction', { event_type: 'finished' });
    }, false);
​
    player.addEventListener('error', function() {
      client.recordEvent('video-interaction', { event_type: 'error' });
    }, false);
  }
  </script>
</body>
</html>
    