[Day27] Video Speed Controller UI

需要用到的技巧與練習目標

1. mousemove
2. offsetTop
3. offsetHeight
4. Math.round()
5. toFixed()
6. playbackRate

const speed = document.querySelector('.speed')

const bar=speed.querySelector('speed-bar')
const video= document.querySelector('.flex')
function handleMove(e){
const y = e.pageY-this.offsetTop;
const percent = y/this.offsetHeight;
const min=0.4
const max=4
const playbackRate=precent* (max-min)+min

const height = Math.round(percent * 100) +'%'
bar.style.height=height
bar.textContent=playbackRate.toFixed(2)+ 'x'
video.playbackRate=playbackRate
}

speed.addEventListener('mousemove',handleMove)

參考資料來源:

1. https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed
2. https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/playbackRate