JS30-28-Video-Speed-Controller

發表於 | 分類於 ， | 0 comments

用滑鼠控制影片播放速率

目標

  • 用滑鼠控制影片播放速率。

成品

[DEMO] | [GitHub]

學習紀錄

此次重點在於

  1. 滑鼠在 速率條移動 時，如何取得正確的座標
  2. 滑鼠移動的座標 與 速率條 二者之間，如何計算出比例轉換成 速率值
整段程式碼
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');

speed.addEventListener('mousemove', function(e){
  // console.log(e);

  // 取得滑鼠在元素移動的座標
  const y = e.pageY - this.offsetTop;
  // 計算滑鼠移到的座標點，佔元素比例是多少
  const percent = y / this.offsetHeight;
  // 比例 轉成 百分比
  const height = Math.round(percent * 100) + '%';
  // 修改 速度條 的高度
  bar.style.height = height;

  // 設定 最慢速率、最快速率
  const min = 0.4;
  const max = 4;

  // 取得播放速率(最慢0.4倍，最多4倍速)
  const playbackRate = percent * (max - min) + min;
  // 最多取得小數點後兩位
  bar.textContent = playbackRate.toFixed(2) + '×';
  // 控制影片的速率
  video.playbackRate = playbackRate;
})