[JS] Day 28 - Video Speed Controller

demo:

demo사이트

github:

Danji-ya

---

[JS] Day 28 - Video Speed Controller

🎯 기능 요구사항

• 마우스를 움직여 비디오의 속도를 조절할 수 있다.

🚀 배운 점

video.playbackRate

playbackRate 속성은 현재 비디오 재생 속도를 설정할 수 있기 때문에 빨리 감기, 슬로우 모션 등에 대한 사용자 컨트롤을 구현할 수 있다.

그 밖에 마우스 좌표나 비율 값 변화 같은 정보는 이전 시간에 구현 해본 방법이랑 비슷해서 어렵지 않게 할 수 있었다.

💻 최종코드

(function(){
    const video = document.querySelector('video');
    const speed = document.querySelector('.speed');
    const speedBar = document.querySelector('.speed-bar'); 

    const percentToMinMax = (percent) => {
        const min = 0.4;
        const max = 4;

        return (percent * (max - min) + min).toFixed(2);
    }

    const changeVideoSpeed = (percent) => {
        const videoSpeed = percentToMinMax(percent);

        speedBar.style.height = `${Math.round(percent * 100)}%`;
        speedBar.textContent = `${videoSpeed}x`;
        video.playbackRate = `${videoSpeed}`;
    }

    speed.addEventListener('mousemove', function(e){
        const posY = e.pageY - this.offsetTop;
        const percent = posY / this.offsetHeight;

        changeVideoSpeed(percent);
    });
})();