Video Speed Controller UI


Posted by wayne201299 on 2023-10-04

透過播放速度條調整播放速度

實作

  1. 當滑鼠在速度條上移動,監聽移動事件,算出在速度條上的比例,得到百分比,再動態修改速度條外觀,最後再調整video API的playbackRate以控制播放速度

     speed.addEventListener("mousemove", mousemove);
    
     function mousemove(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) + "%";
         bar.style.height = height;
    
         const playbackRate = percent * (max - min) + min;
         video.playbackRate = playbackRate;
         bar.textContent = playbackRate.toFixed(2) + "x";
         video.playbackRate = playbackRate;
     }
    

知識點

  • offsetHeight用來獲取element的高度
  • offsetTop用來獲取element相對父元素頂部的距離

#javascript







Related Posts

用 Nest.js 開發 API 吧 (二) - 專案架構

用 Nest.js 開發 API 吧 (二) - 專案架構

用 JS 玩轉 iOS shortcuts

用 JS 玩轉 iOS shortcuts

【Day04】實戰開始 - 設計版型以及透過Vue框架建立專案

【Day04】實戰開始 - 設計版型以及透過Vue框架建立專案


Comments