Javascript 30 - Gün 28

<div class="wrapper">
  <video class="flex" width="765" height="430" src="https://elbaley.github.io/js-30/11/652333414.mp4"  loop
    controls></video>
  <div class="speed">
    <div class="speed-bar">1×</div>
  </div>
</div>

<script>
const speed = document.querySelector('.speed')
const speedBar = document.querySelector('.speed-bar')
const video = document.querySelector('.flex')
 
let isDown = false;
 
function setPlaybackRate(e) {
  // eğer fare tuşuna basılı değilse early return ile durdur
  if (!isDown) return
 
  const y = e.pageY - this.offsetTop
  // speedbarın konumu ile yüzdeyi hesaplayalım
  const speedPercent = y / this.offsetHeight
 
  // minimum - maksimum hızları tanımlayalım
  const minPercent = 0.25
  const maxPercent = 5
  const height = Math.round(speedPercent * 100) + '%'
  // oynatma hızını minimum-maksimum hız aralığında olacak şekilde hesaplayalım
  const playbackRate = speedPercent * (maxPercent - minPercent) + minPercent
 
  // hız barının yüksekliğini ayarlayalım
  speedBar.style.height = height
  // güncel hız değerini yazdıralım
  speedBar.textContent = playbackRate.toFixed(2) + "x"
 
  //video oynatma hızını güncelleyelim
  video.playbackRate = playbackRate
}
 
speed.addEventListener('mousemove',setPlaybackRate)
 
// fare tuşuna basıldığında / tuş bırakıldığında isDown değişkenini güncelleyelim
speed.addEventListener('mousedown', () => {
  isDown = true
})
speed.addEventListener('mouseup', () => {
  isDown = false
})
</script>