iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
自我挑戰組

JavaScript 30天 跟著一起做一遍!!!系列 第 27

## [Day27] Video Speed Controller UI

[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

上一篇
[Day26] Click and Drag to Scroll
下一篇
Countdown Clock
系列文
JavaScript 30天 跟著一起做一遍!!!30

尚未有邦友留言

立即登入留言