Day28 Video Speed Controller UI

第28天實作目標為做出移動特定元素即可控制影片播放速率，類似於input元素中的滑動桿。

這次是以上下拉動的元素來控制速率。

<div class="speed">
  <div class="speed-bar">1×</div>
</div>

在控制條元素<div class="speed"></div>中建立滑鼠移動mousemove事件，在事件中取得滑鼠在控制條元素中長度的位置const y = e.pageY - this.offsetTop，並取得控制條元素的長度const percent = y / this.offsetHeight，去計算滑鼠在控制條元素的相對位置的百分比const height = Math.round( percent * 100 )+'%'，之後百分比轉換成播放速率const playRate = percent * (max - min) + min。

function handleMove(e){
    const y = e.pageY - this.offsetTop
    const percent = y / this.offsetHeight
    const max = 4
    const min = 0.4
    const height = Math.round( percent * 100 )+'%'
    const playRate = percent * (max - min) + min

    speedBar.style.height = height
    speedBar.textContent = playRate.toFixed(2) + 'x'
    video.playbackRate = playRate
}

speed.addEventListener('mousemove', handleMove)

之後加入控制條中加入高度speedBar.style.height = height，設定播放速度內容video.playbackRate = playRate，設定顯示速率值speedBar.textContent = playRate.toFixed(2) + 'x'。

Html

<div class="wrapper">
    <video class="flex" width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop controls></video>
    <div class="speed">
      <div class="speed-bar">1×</div>
    </div>
  </div>

Javascript

1. Number.prototype.toFixed()
   toFixed()固定格式的數值。

function financial(x) {
  return Number.parseFloat(x).toFixed(2);
}
console.log(financial(123.456));
// expected output: "123.46"
console.log(financial(0.004));
// expected output: "0.00"
console.log(financial('1.23e+5'));
// expected output: "123000.00"

tags: MouseEvent