Как синхронизировать текущее время для прогресс бара видеоплеера?
Есть 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
}
