apps/video/js/video.js
// handle drags on the time slider
handle drags on the time slider
handle drags on the time slider
function dragSlider(e) {
  var isPaused = dom.player.paused;
  dragging = true;
  if (dom.player.duration === Infinity)
    return;
  if (!isPaused) {
    dom.player.pause();
  }
  document.addEventListener('mousemove', mousemoveHandler, true);
  document.addEventListener('mouseup', mouseupHandler, true);
  function position(event) {
    var rect = dom.sliderWrapper.getBoundingClientRect();
    var position = (event.clientX - rect.left) / rect.width;
    position = Math.max(position, 0);
    position = Math.min(position, 1);
    return position;
  }
  function mouseupHandler(event) {
    document.removeEventListener('mousemove', mousemoveHandler, true);
    document.removeEventListener('mouseup', mouseupHandler, true);
    dragging = false;
    dom.playHead.classList.remove('active');
    if (dom.player.currentTime === dom.player.duration) {
      pause();
    } else if (!isPaused) {
      dom.player.play();
    }
  }
  function mousemoveHandler(event) {
    var pos = position(event);
    var percent = pos * 100 + '%';
    dom.playHead.classList.add('active');
    dom.playHead.style.left = percent;
    dom.elapsedTime.style.width = percent;
    dom.player.currentTime = dom.player.duration * pos;
    dom.elapsedText.textContent = formatDuration(dom.player.currentTime);
  }
  mousemoveHandler(e);
}
function dragSlider ( e ) { var isPaused = dom . player . paused ; dragging = true ; if ( dom . player . duration === Infinity ) return ; if ( ! isPaused ) { dom . player . pause ( ) ; } document . addEventListener ( 'mousemove' , mousemoveHandler , true ) ; document . addEventListener ( 'mouseup' , mouseupHandler , true ) ; function position ( event ) { var rect = dom . sliderWrapper . getBoundingClientRect ( ) ; var position = ( event . clientX - rect . left ) / rect . width ; position = Math . max ( position , 0 ) ; position = Math . min ( position , 1 ) ; return position ; } function mouseupHandler ( event ) { document . removeEventListener ( 'mousemove' , mousemoveHandler , true ) ; document . removeEventListener ( 'mouseup' , mouseupHandler , true ) ; dragging = false ; dom . playHead . classList . remove ( 'active' ) ; if ( dom . player . currentTime === dom . player . duration ) { pause ( ) ; } else if ( ! isPaused ) { dom . player . play ( ) ; } } function mousemoveHandler ( event ) { var pos = position ( event ) ; var percent = pos * 100 + '%' ; dom . playHead . classList . add ( 'active' ) ; dom . playHead . style . left = percent ; dom . elapsedTime . style . width = percent ; dom . player . currentTime = dom . player . duration * pos ; dom . elapsedText . textContent = formatDuration ( dom . player . currentTime ) ; } mousemoveHandler ( e ) ; }
handle drags on the time slider
handle drags on the time slider
// We can't do anything if we don't know our duration // Capture all mouse moves and the mouse up