[JS30] Day28: Video Speed Controller UI

這一天的實作是要做一個控制器，你可以在上面移動調整影片的播放速度。

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">1x</div>
  </div>
</div>

JS

在 speed 的mousemove事件中，我們設定playbackRate，把這數字放進video.playbackRate和 bar 的textContent之中。

const speed = document.querySelector(".speed");
const bar = speed.querySelector(".speed-bar");
const video = document.querySelector(".flex");

speed.addEventListener("mousemove", function (e) {
  const y = e.pageY - this.offsetTop;
  const percent = y / this.offsetHeight;
  const min = 0.4;
  const max = 4;
  const height = Math.round(percent * 100) + "%";
  const playbackRate = percent * (max - min) + min;
  bar.style.height = height;
  bar.textContent = playbackRate.toFixed(2) + "x";
  video.playbackRate = playbackRate;
});