iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 28
0
Modern Web

JS30 錄系列 第 28

Day 28 - Video Speed Controller

任務目標

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

作法

運用到的概念和 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

完整程式碼


上一篇
Day 27 - Click and Drag
下一篇
Day 29 - Final Countdown
系列文
JS30 錄30

尚未有邦友留言

立即登入留言