倒數兩天，撐下去!

今日任務: 滑動控制影片速度

取得元素

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

偵測滑鼠在bar的占比

speed.addEventListener('mousemove', setRate);

function setRate(e) {
    const y = e.pageY - this.offsetTop;
    const pencent = y / this.offsetHeight;
    console.log(pencent)
}

設定高度到bar上

Math.round() 函數回傳四捨五入後的近似值。

function setRate(e) {
    const y = e.pageY - this.offsetTop;
    const pencent = y / this.offsetHeight;

    const height = Math.round(pencent * 100) + '%';
    speedBar.style.height = height;
}

計算影片速度

設定最大和最小值

因為不能讓影片速度為0，所以設定最大最小值。
影片速度=(max - min) * pencent + min，
可以將pencent帶入此算式，如果pencent為0，會得到是min，如果為1會得到max。

function setRate(e) {
    ...
    const min = 0.4;
    const max = 4;
    const videoRate = (max - min) * pencent + min;
}

渲染速率到畫面上

Number.prototype.toFixed():四捨五入到指定的小數位數。

function setRate(e) {
    ...
    const min = 0.4;
    const max = 4;
    const videoRate = (max - min) * pencent + min;
    speedBar.textContent = `${videoRate.toFixed(2)}x`;
}

設定影片速度到影片上

HTMLMediaElement.playbackRate: 設定播放媒體的速率。

function setRate(e) {
    const y = e.pageY - this.offsetTop;
    const pencent = y / this.offsetHeight;
    const height = Math.round(pencent * 100) + '%';
    speedBar.style.height = height;
    
    const min = 0.4;
    const max = 4;
    const videoRate = (max - min) * pencent + min;
    speedBar.textContent = `${videoRate.toFixed(2)}x`;
    video.playbackRate = videoRate;
}

今日學習到的:

• Number.prototype.toFixed(): 四捨五入為指定的小數位數。
• HTMLMediaElement.playbackRate: 設定播放媒體的速率。

效果連結:連結

參考連結:
JS30