自定義一個影片播放速率控制器

• 事件（滑鼠移動）：Element: mousemove event
• 影片元素速率：HTMLMediaElement: playbackRate property
• 取整數：Math.round()
• 四捨五入取到小數第 n 位：Number.prototype.toFixed()

今天的題目依舊是前面技術的綜合演練，相對我們 Day11 客製的影片播放器可說是小巫見大巫，觀察 index-html 的結構可以發現我們需要控制及偵聽的節點非常簡單，外層是<div class="speed">控制閥容器，內層<div class="speed-bar">才是顏色填滿的區塊

<div class="speed">
  <div class="speed-bar">1×</div>
</div>

1. 先取得我們這題所需要使用到的節點

//  影片容器
const video = document.querySelector("video");
//  速率控制閥容器
const speedContainer = document.querySelector(".speed");
//  速率條(顯示用)
const speedBar = document.querySelector(".speed-bar");

2. 因為不需要按下狀態才能拖曳控制閥，只需要在控制閥容器內移動滑鼠即可改變影片播放速度，因此我們的事件監聽器不需要像昨天那麼多只要一個即可。

//  控制閥容器新增滑鼠移動事件監聽器
speedContainer.addEventListener("mousemove", handlePlayBackRate);

3. handlePlayBackRate 函式：

function handlePlayBackRate(e) {
  //  設定最小及最大速率
  const min = 0.4;
  const max = 4;
  //  百分比 = 滑鼠距離控制閥內部頂點的Ｙ軸值 ÷ 控制閥的容器高度
  const percent = e.offsetY / this.offsetHeight;
  //  影片速率 = 算出來的百分比 * （最大值-最小值）+ 最小值
  //  最後在四捨五入至小數點第二位
  const videoRate = (percent * (max - min) + min).toFixed(2);

  //  速率條的顏色填滿高度就等於 百分比*100 再四捨五入取整數
  speedBar.style.height = `${Math.round(percent * 100)}%`;
  //  速率條的顯示文字就等於算出來的影片速率
  speedBar.textContent = `${videoRate}x`;
  //  設定影片播放速率為滑鼠移動觸發事件後算出來的值
  video.playbackRate = videoRate;
}

👉Github Demo 頁面 👈

👉 好想工作室 15th 鐵人賽看板 👈

參考資料

1. Javascript 30 官網
   https://javascript30.com/
2. MDN 官網
   https://developer.mozilla.org/en-US/