28. Video Speed Controller

프로젝트 소개

• 비디오의 playbacRate를 manual 하게 조절하기 위한 UI와 function 연습

배운 내용

• video.playbackRate
• e.pageY
• element.offsetTop

최종 코드

<script>
      const speed = document.querySelector('.speed');
      const bar = speed.querySelector('.speed-bar');
      const video = document.querySelector('.flex');

      function handleMove(e) {
        console.log(e.pageY, this.offsetTop, this.offsetTop);
        //this.offset값들은 변하지 않음, e.page 값들은 이벤트 발생할때마다 업데이트
        const y = e.pageY - this.offsetTop;
        const percent = y / this.offsetHeight;
        const min = 0.4;
        const max = 4;
        const height = Math.round(percent * 100) + '%';
        // min이 0이 아닐 경우에는 아래와 같이 해야 percentage로 환산가능
        const playbackRate = percent * (max - min) + min;
        bar.style.height = height;
        bar.textContent = playbackRate.toFixed(2) + '×';
        video.playbackRate = playbackRate;
      }

      speed.addEventListener('mousemove', handleMove);
    </script>

느낀 점/ 기억할 점

• HTML input tag 속성으로 min, max등을 정해서 더 쉽게 구현할 수 있지만, input 속성 조절을 좀 더 세부적으로 들여다 볼 수 있었음
• UI에서 bar 크기를 가져올 때, e.pageY - this.offsetTop 활용