今天我們要來製作一個控制影片速度的進度條，還記得在Day11的時候做影片也有調整過速度吧！今天算是一個複習，那就來吧！

首先我們要拿到的東西有調整速度的 bar 和它的容器的高，這樣才能利用百分比去計算速度

關於拖曳才會有效果的做法前幾天已經有說過
這邊就不多加敘述

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

function mouseDown(e) {
    isDown = true;
}
function mouseUp() {
    isDown = false;
}
function mouseLeave() {
    isDown = false;
}
function changeSpeed(e)  {
    if(!isDown) return;
    //改變速度
}
speed.addEventListener('mousedown',mouseDown);
speed.addEventListener('mouseup',mouseUp);
speed.addEventListener('mouseleave',mouseLeave);
speed.addEventListener('mousemove', changeSpeed);

首先我們要設定最大與最小速度，接著計算點擊位置在整個進度條的位置，
那就是 e.pageY 去扣掉 this.offsetTop ，然後去除以 this.offsetHeight 計算百分比，最後用 minSpeed 來做修正，即可完成速度的計算。

function changeSpeed(e)  {
    if(!isDown) return;
    const maxSpeed = 8;
    const minSpeed = 0.25;
    const hoverSpeed = e.pageY - this.offsetTop;
    const percentage = hoverSpeed / this.offsetHeight;
    const height = `${Math.round(percentage * 100)}%`;
    const playbackRate = (maxSpeed - minSpeed) * percentage + minSpeed;
    bar.style.height = height;
    bar.textContent = `${playbackRate.toFixed(1)}x`;
    video.playbackRate = playbackRate;
}

最後將 css 樣式修改，並更新 video 的播放速度playbackRate

這時候會發現，只有在點擊且移動滑鼠的時候才會有效果
但是「點擊」那一下並不會修改播放速度
所以我們在 mouseDown 事件要做一些修改

function mouseDown(e) {
    isDown = true;
    changeSpeed();
}

在點下去的時候，也呼叫changeSpeed()，但是這樣會導致點下去時，顯示的播放速度是 NaN%
這是因為在 changeSpeed()內的this.offsetTop 和 this.offsetHeight，他們的 this指向 window 。
因此我們使用.call()來讓執行 changeSpeed() 時，changeSpeed() 的 this還是指向 mouseDown 的 this 而不是 window 。

function mouseDown(e) {
    isDown = true;
    changeSpeed.call(this, e);
}

Demo
完整程式碼