[JavaScript 30일 챌린지] : 28일차

<script>
  constspeed=document.querySelector('.speed');
  constbar=speed.querySelector('.speed-bar');
  constvideo=document.querySelector('.flex');

  function handleMove(e) {
    const y = e.pageY - this.offsetTop;
    const percent = y / this.offsetHeight;
    const min = 0.4;
    const max = 4;
    const height =Math.round(percent * 100) + '%';
    const playbackRate = percent * (max -min) + min;
		bar.style.height = height;
		bar.textContent = playbackRate.toFixed(2) + '*';
		video.playbackRate = playbackRate;
  }

speed.addEventListener('mousemove', handleMove);

</script>

저번에 진행했던 동영상 속도 관련 조절하는 것을 이번에는 수직바에 마우스로 속도를 조절하는 프로젝트를 만들었다.