Log events for VideoJS 4 or 5 players and techs.

dump-player-and-tech-events.js

/* global window */
(function(player, vjs){
  var is5 = vjs.VERSION.charAt(0) === '5';
  var players = is5 ? vjs.getPlayers() : vjs.players;

  // Nah.
  if (is5 ? vjs.browser.IS_IE8 : vjs.IS_IE8) {
    return;
  }

  // Use the global `player` or the first player found.
  player = player || Object.keys(players).find(function(k) {
    return players[k];
  });

  var tech = is5 ? player.tech_ : player.tech;
  var prevClasses = [];
  var history = window.playerHistory = [];

  var excludedEvents = [
    'progress',
    'suspend',
    'timeupdate',
  ];

  var playerEvents = [].
    concat(is5 ? vjs.getComponent('Html5').Events : vjs.Html5.Events).
    concat([
      // events emitted by ad plugin
      'adtimeout',
      'contentupdate',
      'contentplaying',
      'contentended',

      // events emitted by third party ad implementors
      'adsready',
      'adserror',
      'adscanceled',
      'adstart',
      'adend',
      'adskip',
    ]).filter(filterExcluded);

  var techEvents = [
      'loadstart',
      'waiting',
      'canplay',
      'canplaythrough',
      'playing',
      'ended',
      'seeking',
      'seeked',
      'play',
      'firstplay',
      'pause',
      'progress',
      'durationchange',
      'fullscreenchange',
      'error',
      'suspend',
      'abort',
      'emptied',
      'stalled',
      'loadedmetadata',
      'loadeddata',
      'timeupdate',
      'ratechange',
      'volumechange',
      'texttrackchange',
      'loadedmetadata',
    ].filter(filterExcluded);

  function filterExcluded(e) {
    return excludedEvents.indexOf(e) === -1;
  }

  function dump(e){
    var what = this === tech ? 'tech' : 'player';
    var newClasses = [].slice.call(player.el().classList);
    var data = {};
    var name = [what, e.type,].join(':');

    if (player.ads) {
      data.adsState = player.ads.state;
    }

    history.push(name);

    console.log(name, {
      classes: [].concat(newClasses),

      // Include a diff of player element classes.
      classesDiff: newClasses.filter(function (c) {
        return prevClasses.indexOf(c) === -1;
      }).map(function (c) {
        return '+ ' + c;
      }).concat(
        prevClasses.filter(function (c) {
          return newClasses.indexOf(c) === -1;
        }).map(function (c) {
          return '- ' + c;
        })
      ),

      event: e
    });

    prevClasses = newClasses;
  }

  player.on(playerEvents, dump);
  tech.on(techEvents, dump);
  dump.call(player, {type: 'initial'});

}(window.player, window.videojs));