Minimalistic VAST Ad Player

vast-client-player.js

var createVideoElement = function (w, h) {
  var videoEl = document.createElement('video');
  videoEl.setAttribute('width', w);
  videoEl.setAttribute('height', h);
  videoEl.setAttribute('muted', true);
  videoEl.style.cssText = 'cursor: pointer; background-color: #000;';
  return videoEl;
};

var createSourceElement = function (src, type) {
  var srcEl = document.createElement('source');
  srcEl.setAttribute('src', src);
  srcEl.setAttribute('type', type);
  return srcEl;
};

var playAdTracker = function(el, w, h, adTracker, onComplete) {
  var videoEl = createVideoElement(w, h);

  adTracker.creative.mediaFiles.forEach(function (mediaFile) {
    var srcEl = createSourceElement(mediaFile.fileURL, mediaFile.mimeType);
    videoEl.appendChild(srcEl);
  });

  adTracker.on('clickthrough', function (url) {
    window.open(url); // pop open window
  });

  videoEl.addEventListener('playing', function () {
    adTracker.track('start', true);
  });
  videoEl.addEventListener('timeupdate', function (e) {
    var now = e.timeStamp / 1000;
    adTracker.setProgress(now);
  });
  videoEl.addEventListener('click', function () {
    adTracker.click();
  });
  videoEl.addEventListener('canplay', function () {
    adTracker.load()
    el.appendChild(this);
    this.play();
  });
  videoEl.addEventListener('ended', function () {
    adTracker.track('complete', true);
    el.removeChild(this);
    if (onComplete instanceof Function) {
      onComplete();
    }
  });
};