[JS] Day 28 - Video Speed Controller

7365 ワード
テキストリンク

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);
    });
})();
    コンピュータのパケットをElasticSearchにマッピング
    [react]定数データ