Day29 -- Video Speed Controller

目标

今天要来做的是播放速度控制器，可以透过游标移动控制播放速度

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属性设为计算後的结果，就大功告成罗