Video Speed Controller UI

透過播放速度條調整播放速度

實作

當滑鼠在速度條上移動，監聽移動事件，算出在速度條上的比例，得到百分比，再動態修改速度條外觀，最後再調整video API的playbackRate以控制播放速度

 speed.addEventListener("mousemove", mousemove);

 function mousemove(e) {
     const y = e.pageY - this.offsetTop;
     const percent = y / this.offsetHeight;
     const min = 0.4;
     const max = 4;
     const height = Math.round(percent * 100) + "%";
     bar.style.height = height;

     const playbackRate = percent * (max - min) + min;
     video.playbackRate = playbackRate;
     bar.textContent = playbackRate.toFixed(2) + "x";
     video.playbackRate = playbackRate;
 }