[JS] Day 28 - Video Speed Controller

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);
    });
})();