javascript 30 — Custom HTML5 Video Player day11

#done

• ternary operator

const icon = video.paused? '►' : '||';
toggleButton.textContent = icon;

• addEventListener — click, pause, play
• div — transition, flex, transform

.player:hover .player__controls {
   transform: translateY(0);
}

• input[type=range]
• video.volume = 1
• video.playbackRate = 0.5
• video.currentTime += parseFloat(this.dataset.skip);

ranges.forEach(input => input.addEventListener('change', slider));
ranges.forEach(input => input.addEventListener('mousemove', slider));
skipButtons.forEach(button => button.addEventListener('click',skip));

#Update volume and playbackRate

video[this.name] = this.value
//
if(this.name === "volume"){
  video.volume = this.value;
}else{
  video.playbackRate = this.value;
}

# update time

• addEventListener ‘timeupdate’

function timeUpdate(){
    const percent = (video.currentTime / video.duration) * 100;
    progressBar.style.flexBasis = `${percent}%`;
  }

#event.offsetX — The offsetX property returns the x-coordinate of the mouse pointer, relative to the target element.

const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
video.currentTime = scrubTime;

#element.offsetWidth — the viewable width of an element in pixels, including padding, border and scrollbar but not the margin.

#dragging progress bar

• addEventListener ‘mousedown’, mouseup, mousemove

let mousedown = false;
progress.addEventListener('click', scrub);
progress.addEventListener('mousemove', (e) => mousedown && scrub(e));
  // progress.addEventListener('mousemove', (e) => {
  //   if(mousedown){
  //     scrub(e);
  //   }
  // }
  progress.addEventListener('mousedown', () => mousedown = true);
  progress.addEventListener('mouseup', () => mousedown = false);

#ref

• HTML Audio/Video DOM Reference — https://www.w3schools.com/tags/ref_av_dom.asp
• scrubber — https://blog.teamtreehouse.com/building-custom-controls-for-html5-videos