Javascript30 - day28 Video Speed Controller UI

목표

비디오 옆의 bar를 움직여 재생 속도 조절하기

 

내가 작성한 코드

const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');
 
speed.addEventListener('mousemove', (e) => {
    e.preventDefault();
    const height = e.offsetY
    bar.style.height = `${(e.offsetY / 400) * 100}%`;
    bar.innerHTML = `${(e.offsetY / 100).toFixed(1)}x`;
    video.playbackRate = (e.offsetY / 100).toFixed(1);
})

offsetY로 마우스의 위치를 구하고, height와 속도를 구해서 입력해주었다.

 

영상의 코드

const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = 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) + '%';
    // min <= playbackRate <= max
    const playbackRate = percent * (max - min) + min;
    bar.style.height = height;
    bar.textContent = playbackRate.toFixed(2) + 'x';
    video.playbackRate = playbackRate;
}
 
speed.addEventListener('mousemove', handleMove);

마우스의 위치를 e.pageY - this.offsetTop으로 구해준다.

persent는 y를 bar의 height로 나눈 값으로 만들어준다.(0과 1 사이의 값)

height는 Math.round를 통해 %단위를 정수로 만들어준다.

playbackRate는 최소 0.4, 최대 4를 가지는 변수로 percent * (max - min) + min 으로

원하는 범위 내의 값을 만들어 줄 수 있다.

bar 안에 들어갈 숫자는 .toFixed(2)로 소수점 둘째자리까지 나타내도록 한다.

 

새롭게 알게된 것

최대/최소값 사이의 수를 정하는 것을 어떻게 해야할지 몰라 그냥 놔뒀는데

percent(0과 1 사이의 값) * (max - min) + min 을 통해 할 수 있다.

bar의 높이를 측정해서 y / 400으로 하는 것 보다 y / this.offsetHeight;로 하는 것이 bar를 변경했을 때 수정이 필요 없이 코드를 그대로 사용할 수 있고, 다른 요소에 함수를 붙여서 사용할 수 있다.