任務目標

做一條控制影片播放速度的調節器，滑鼠在上面滑動就能夠改變播放速度。
範例連結

作法

運用到的概念和 Day 11 的影片播放條很像。差別在於這次直接以滑動控制，無需拖曳。

要客製化調節器，通常會需要一個外層元素做為容器，表示最大值的位置。內層的元素則代表目前實際值的位置。

接著監聽滑鼠在調節器上移動的事件，只要觸發就回傳函式，該函式會計算滑鼠位置造成的播放速率變化，並以該比例來調節影片的播放速率。

// 容器，表示最大值
const speed = document.querySelector('.speed');
// 實際值
const bar = speed.querySelector('.speed-bar');
// 要控制的影片元素
const video = document.querySelector('.flex');

// 監聽調節器，有滑鼠在上方移動就計算並設定播放速率
speed.addEventListener('mousemove', handlePlayback);

這次的滑動方向是垂直的，因此只需要考慮垂直方向的 Y 座標。

要明確地表示出實際進度條佔整個調節器長度的比例，才能用該值來決定調節播放速率。

這個比例就是（滑鼠位置與調節器原點的距離 / 調節器總高度）。

將該比例換算成播放速率後，加上單位，指定給影片，就能控制播放速率。

將該比例換算成長度，指定給實際進度條來更新顯示給使用者的介面。

整體如下：

// 調節播放速率的函式
function handlePlayback(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) + '%'
	// 用內插法將該比例換算為需要的播放速率
	const playbackRate = min + (max - min) * percent;
	// 更新調節器進度條顯示位置
	bar.style.height = height;
	// 將播放速率加上單位
	bar.textContent = playbackRate.toFixed(2) + 'x';
	// 將上了單位後的播放速率指定給影片本身
	video.playbackRate = playbackRate;
}

以上就是 JS30 第二十八篇！

看到這邊，這些對各位來說已經跟吃飯一樣簡單了呢！

Reference

完整程式碼