目標

今天要來做的是播放速度控制器，可以透過游標移動控制播放速度

Step1

const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');

function playRateChange(e){
    console.log(e)
}

speed.addEventListener('mousemove', playRateChange);

第一步，不廢話，先選定元素

然後是監聽事件，這次監聽的區域是下圖最右邊的長條區域

Step2

function speedRateChange(e){
		const y = e.pageY - this.offsetTop;
    const percent = y /this.offsetHeight;
    const height = Math.round(percent * 100) + '%';
    bar.style.height = height;
}

這邊跟昨天的游標位置計算方式一樣，是要以游標相對html文檔的位置，減去元素外緣到頁面頂端的距離，這是因為我們無法保證元素是在頁面的最頂端

然後就可以計算元素內有顏色區塊的長度了

Step3

function speedRateChange(e) {
		// ...
		const min = 0.5;
		const max = 4;
    const playbackRate = percent * (max - min) + min;
    bar.textContent = playbackRate.toFixed(2) + 'x';
    video.playbackRate = playbackRate;
}

接下來要處理播放的速度了

首先，先設定播放速度的最大/最小值

接著，要算出調整後的播放速度值，以最大／最小值的差，乘上長度百分比，再加上最小值就可以求得囉

最後，將元素的textContent屬性，以及將媒體的playbackRate屬性設為計算後的結果，就大功告成囉

toFixed()

此方法會使用定點小數表示法（fixed-point notation）來格式化數字