Как синхронизировать текущее время для прогресс бара видеоплеера?

Есть input range, который служит прогресс баром для видеоплеера. При реализации логики отображения длительности фрагмента видео при наведении курсора на бегунок столкнулся с проблемой рассинхронизации. При наведении высчитывается одно время, а при перемещении бегунка в ту же точку имеет место расхождение в пару секунд (иногда расхождения нет)

<input type="range" max="100" step="0.01" value="0">

Логика:

progressRange.onmousemove = (function (e){
      const tooltip = document.getElementsByClassName('progress-tooltip')[0]
      tooltip.innerHTML = this.timeFormat(this.player.video.duration/100 * (e.offsetX/progressRange.offsetWidth*100))
      tooltip.style.left = e.offsetX + 'px'
      tooltip.style.marginLeft = -(tooltip.offsetWidth / 2) + 'px'
    }).bind(this)
    progressRange.oninput = (function() {
      this.player.video.currentTime = (this.player.video.duration / 100 * progressRange.value).toFixed(2)
      this.progress.firstChild.style.width = progressRange.value + '%'
    }).bind(this)
this.player.video.ontimeupdate = (function () {
      const value = (this.player.video.currentTime/this.player.video.duration * 100).toFixed(2)
      this.progressBg.style.width = value + '%'
      this.progressRange.value = value
      this.timebar.innerHTML = this.timeFormat(this.player.video.currentTime) + ' / ' + this.timeFormat(this.player.video.duration)
    }).bind(this)
timeFormat(timestamp) {
      timestamp = Number(timestamp).toFixed()
      let formatted = '';
      let hours = 0
      if (timestamp > (60 * 60)) {
        let hours = Math.floor(timestamp / 60 / 60);
        formatted += (hours >= 10 ? hours : ('0' + hours)) + ':'
      }

      let minutes = Math.floor(timestamp / 60) - (hours * 60);
      let seconds = timestamp % 60;

      formatted += (minutes >= 10 ? minutes : ('0' + minutes)) + ':'
      formatted += seconds >= 10 ? seconds : ('0' + seconds)

      return formatted
    }

введите сюда описание изображения


Ответы (0 шт):