主題目標
使用 div 來製作一個速度條,來調整影片播放速度。需要實現的效果是當鼠標拖動滑塊時,實時改變視頻播放的速度。?
作品網址:
處理步驟
不使用 input ,改使用 div ,透過滑鼠位置與 div 大小來計算播放速度
步驟一
取得速度元素的 DOM ,然後建立 mousemove 滑鼠移動事件的觸發
// 取得 speed div const speed = document.querySelector('.speed'); // 取得 speed bar div const bar = document.querySelector('.speed-bar'); // 滑鼠移動 function handleMove (e){ } //設定監聽 speed.addEventListener('mousemove',handleMove);
步驟二
計算滑鼠在速度條上的位置,利用相對位置與速度條的大小計算比例;然後依照該比例去計算播放速度
// 速度條上滑鼠移動 function handleMove (e){ // 取得滑鼠在速度條上的位置 const y = e.pageY - this.offsetTop; // 計算移動的速度條百分比 const percent = y / this.offsetHeight; // 速度條的最小倍速與最大倍速 const min = 0.4 ,max = 4; // 播放速度計算 const playSpeed = percent * (max - min) + min; }
步驟三
更換速度條的樣式與內容文字,以及播放器的播放速度
// 取得播放器 DOM const video = document.querySelector("video"); // 速度條上滑鼠移動 function handleMove (e){ // 取得滑鼠在速度條上的位置 const y = e.pageY - this.offsetTop; // 計算移動的速度條百分比 const percent = y / this.offsetHeight; // 速度條的最小倍速與最大倍速 const min = 0.4, max = 4; // 播放速度計算 const playSpeed = percent * (max - min) + min; //------------------ // 速度條的樣式 bar.style.height = `${Math.round(percent * 100)}%`; // 速度條的內容文字更新 bar.textContent = `${playSpeed.toFixed(2)}x`; // 調整播放速度 video.playbackRate = playSpeed; }
特別技術、函式
<HTML>
<CSS>
<JavaScript>
toFixed()
方法會使用定點小數表示法(fixed-point notation)來格式化數字。格式化數字,設定顯示小數位,最多到 20 位數
MouseEvent.pageY
滑鼠返回觸發事件的位置相對於整個 document 的 Y 坐標值。
參考資料:
JS30紀錄 28-Video Speed Controller:https://shunnien.github.io/2018/02/01/Javascript30days-28/
Js 30 day 中文指南:https://github.com/soyaine/JavaScript30