video eventlistener stuffs

function setupControls(video, container) {

  // console.log('setting up ctrls');
  video.removeAttribute('controls');

  var $plause =   $(container).find('.plause');
  var $progress = $(container).find('.progress');
  var $played =   $(container).find('.progress .played');
  var $loaded =   $(container).find('.progress .loaded');
  var $current =  $(container).find('.time .current');
  var dragging = false;


  // PLAY / PAUSE ---------
  $plause[0].addEventListener('click', function() {
    if (video.paused) { video.play(); }
    else { video.pause(); }
  });

  video.addEventListener('loadedmetadata', function() {
    $(container).find('.time .duration').html( formatTime(video.duration) );
  });

  // PROGRESS BARS --------
  video.addEventListener('timeupdate', function() {
    var percentage = (100 * video.currentTime / video.duration).toFixed(1);
    $current.text( formatTime(video.currentTime) );
    $played.css('width', percentage+'%');
  });

  video.addEventListener('progress', function() {

    // if ( 'video is ready...')
    if (video.buffered && video.buffered.length && video.buffered.end) {
      var percentage = (100 * video.buffered.end(0) / video.duration).toFixed(1);
      $loaded.css('width', percentage+'%');
    }
  });

  // only bind mouse events, as touch devices have their own UI
  $progress.mousedown(function(e) {
    dragging = true;
    updateProgress(e.pageX);
  });
  $(document).mouseup(function(e) {
    if(dragging) {
      dragging = false;
      updateProgress(e.pageX);
      video.play();
    }
  });
  $(document).mousemove(function(e) {
    if(dragging) {
      video.pause();
      updateProgress(e.pageX);
    }
  });

  // HELPER FUNCTIONS -----
  function updateProgress(x) {
    var position = x - $progress.offset().left;						// Click position
    var percentage = 100 * position / $progress.width();

    if(percentage > 100) { percentage = 100; }
    if(percentage < 0) { percentage = 0; }

    $played.css('width', percentage+'%');
    video.currentTime = video.duration * percentage / 100;
  };

  // format time, from video.js
  /* @param  {Number} seconds Number of seconds to be turned into a string
   * @param  {Number} guide   Number (in seconds) to model the string after
   * @return {String}         Time formatted as H:MM:SS or M:SS
  */
  function formatTime(seconds, guide) {
    // Default to using seconds as guide
    guide = guide || seconds;
    var s = Math.floor(seconds % 60),
        m = Math.floor(seconds / 60 % 60),
        h = Math.floor(seconds / 3600),
        gm = Math.floor(guide / 60 % 60),
        gh = Math.floor(guide / 3600);

    // handle invalid times
    if (isNaN(seconds) || seconds === Infinity) {
      h = m = s = '-';
    }

    // Check if we need to show hours
    h = (h > 0 || gh > 0) ? h + ':' : '';

    // If hours are showing, we may need to add a leading zero. Always show at least one digit of minutes.
    m = (((h || gm >= 10) && m < 10) ? '0' + m : m) + ':';

    // Check if leading zero is need for seconds
    s = (s < 10) ? '0' + s : s;

    return h + m + s;
  };
}
/* */
}