iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 29
0
Modern Web

森林系工程師之開始工作才學JS?!系列 第 30

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

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

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

https://ithelp.ithome.com.tw/upload/images/20201012/20121041nAEqSr4nAn.png

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文檔的位置,減去元素外緣到頁面頂端的距離,這是因為我們無法保證元素是在頁面的最頂端

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

https://ithelp.ithome.com.tw/upload/images/20201012/20121041JJNUd22cx5.png

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)來格式化數字

https://ithelp.ithome.com.tw/upload/images/20201012/20121041tjeRQRniaH.png


上一篇
Day28 -- Click and Drag
下一篇
Day30 -- Countdown Clock
系列文
森林系工程師之開始工作才學JS?!32

尚未有邦友留言

立即登入留言