alestro
@alestro

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

Есть 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)

Как можно пофиксить?
  • Вопрос задан
  • 42 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы