# JS30 Day28
## Video Speed Controller UI
###### tags: `JS 30`
by Angelina
---
歡迎來到魔法森林
---
今天的魔法課程是
---
入會咒語
# Wingardium Leviosa
Win gar dium Le vio sa
### 請跟著唸三遍！！！
---
[魔法世界入口](https://dustinhsiao21.github.io/Javascript30-dustin/28%20-%20Video%20Speed%20Controller/)
---
以更潮的視覺化魔法
改變影片的播放速率
---
步驟
視覺 -> 播放速率
---
1. 抓取 DOM 元素
---
```javascript=
const video = document.querySelector('.flex')
const speed = document.querySelector('.speed')
const bar = speed.querySelector('.speed-bar')
```
---
2. speed 加上 mousemove 監聽 => 執行 handleMove function
---
```javascript=
const video = document.querySelector('.flex')
const speed = document.querySelector('.speed')
const bar = speed.querySelector('.speed-bar')
speed.addEventListener('mousemove', handleMove)
function handleMove(e) {
console.log(e)
}
```
---
### 複習一下 this 與 e.target
當事件綁在父元素上，觸發到子元素時
- this => 回傳父元素
- e.target => 回傳子元素
---
- 父元素 speed => 綁定
- 子元素 bar
觸發到子元素時
this = speed
e.target = bar
---
了解 mousemove 的位置
e = bar
this = speed
- e.pageY:目前滑鼠在Y的位置
(隨著滑鼠位置改變，滑鼠在bar裡面的位置)
- this.offsetTop:元素在上方的位置
(元素上方位置 = 177 固定)
- this.offsetHeight:元素本身高度
(元素本身高度 = 410 固定)
---
---
3. 計算高度
---
```javascript=
const video = document.querySelector('.flex')
const speed = document.querySelector('.speed')
const bar = speed.querySelector('.speed-bar')
speed.addEventListener('mousemove', handleMove)
function handleMove(e) {
const y = e.pageY - this.offsetTop
const percent = y / this.offsetHeight
const height = Math.round(percent * 100) + '%'
}
```
---
4. 用 height 改變 bar 的 style 視覺效果
---
```javascript=
const video = document.querySelector('.flex')
const speed = document.querySelector('.speed')
const bar = speed.querySelector('.speed-bar')
speed.addEventListener('mousemove', handleMove)
function handleMove(e) {
const y = e.pageY - this.offsetTop
const percent = y / this.offsetHeight
const height = Math.round(percent * 100) + '%'
bar.style.height = height
}
```
---
4. 計算播放速率
min~max => playback rate
---
```javascript=
const min = 0.4;
const max = 4;
const playbackRate = percent * (max - min) + min
```
percent = 0.5 (50%)
max - min = 4 - 0.4 = 3.6
0.5*(4-0.4) = 1.8
1.8 + 0.4 = 2.2
percent = 1 (100%)
max - min = 4 - 0.4 = 3.6
1*(4-0.4) = 3.6
3.6 + 0.4 = 1
---
5. playback rate 改變 bar 的 style 視覺效果
---
```javascript=
const video = document.querySelector('.flex')
const speed = document.querySelector('.speed')
const bar = speed.querySelector('.speed-bar')
speed.addEventListener('mousemove', handleMove)
function handleMove(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
const playbackRate = percent * (max - min) + min
bar.textContent = playbackRate.toFixed(2) + '×'
}
```
---
6. 套入影片播放速率
---
```javascript=
const video = document.querySelector('.flex')
const speed = document.querySelector('.speed')
const bar = speed.querySelector('.speed-bar')
speed.addEventListener('mousemove', handleMove)
function handleMove(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
const playbackRate = percent * (max - min) + min
bar.textContent = playbackRate.toFixed(2) + '×'
video.playbackRate = playbackRate
}
```
---
說好的教魔法
變成教數學了？？？
---
### 再複習一次入會咒語
---
# Wingardium Leviosa
---
魔法森林，下期再見 bye
{"metaMigratedAt":"2023-06-16T06:19:41.664Z","metaMigratedFrom":"Content","title":"JS30 Day28","breaks":true,"contributors":"[{\"id\":\"e66977c1-c757-4957-8123-cd26044bbbba\",\"add\":3725,\"del\":158}]"}