[JS30] - 28) Video Speed Controller

이전 프로젝트 [JS30] - 11) Custom Video Player 에서 한번 비디오에 대해 다룬적이 있었던데다 간단한 프로젝트여서 어렵지는 않았다.

다만 offsetY의 높이를 원하는 재생속도로 어떻게 변환할지가 고민이 되어 해당 부분은 강의를 참고했다.

speed 바 숫자 표기

바 전체 높이 대비 숫자 구하기

 $speedBar.addEventListener('click', (ev) => {
    const barHeight = ev.offsetY;
    const speed = barHeight / 410

    const min = 0.4;
    const max = 4;
    const playbackRate = speed * (max-min) + min;
    const playback = playbackRate.toFixed(1)
    $speedContent.textContent = `${playback}x`

    $speedContent.style.height = `${speed * 100}%`
    $video.playbackRate = `${playback}`
  })

1. 0.4x 부터 0.1씩 올라가 4x가 최대 속도여야 한다. 따라서 최솟값과 최댓값을 지정해준다.
2. 클릭한 곳의 바에서의 높이를 전체 바 높이로 나눈뒤, 최댓값과 최솟값 사이구간의 길이를 곱해준다. 여기에 최솟값은 min여야 하니 min을 더해준다.

Number.prototype.toFixed()

숫자를 고정 소수점 표기법으로 표기해 반환한다.

@param digits

소수점 뒤에 나타날 자릿수

var numObj = 12345.6789;

numObj.toFixed();       
// Returns '12346': 반올림하며, 소수 부분을 남기지 않습니다.
numObj.toFixed(1);      
// Returns '12345.7': 반올림합니다.
numObj.toFixed(6);      
// Returns '12345.678900': 빈 공간을 0으로 채웁니다.

Reference

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed