js challenge day 28

Video Speed Scrubber

 

Code

  <script>
    const speed = document.querySelector('.speed');
    const bar = speed.querySelector('.speed-bar');
    const video = document.querySelector('.flex');
    const handleMove = (e) => {
      const speedBarRect = speed.getBoundingClientRect();
      const y = e.pageY - speedBarRect.top;
      const percent = y / speedBarRect.height;
      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('click', handleMove);
  </script>

 

배운 점 & 느낀 점

동영상에서 바를 이용해서 동영상 속도를 조절하는 과제였습니다.

바의 크기를 이용하여 위치정보를 알아낸 다음, 클릭으로 0.4배속에서 4.0배속까지 동영상 속도를 조절할 수 있었습니다.

언젠간 이용할 가치가 있을 것 같다는 생각이 듭니다.