<div class="wrapper"> <video class="flex" width="765" height="430" src="../" loop controls></video> <div class="speed"> <div class="speed-bar">1×</div> </div> </div>
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 height = Math.round(percent * 100) + '%'; const playbackRate = percent * (max - min) + min; bar.style.height = height; bar.textContent = playbackRate.toFixed(2) + '×'; video.playbackRate = playbackRate; } speed.addEventListener('mousemove', handleMove);