DEMO - https://codepen.io/syedazam/pen/vYEvEze?editors=0111
Я разрабатываю компонент, в котором во время воспроизведения видео строка состояния должна быть заполнена, для отдельного видео это работает нормально, так как будет несколько видео, например: 1. если видео 3 - тогда будет отображаться 3 индикатора выполнения
const video = document.querySelector('.video__player');
let t;
const togglePlay = function() { if (this.paused) { this.play();} else {this.pause();}}
const updateTime = function() {
let time = document.querySelector('.video__time');
console.log('time',time);
let s = parseInt(this.currentTime % 60).toString().padStart(2, '0');
console.log('time s',s);
let m = parseInt((this.currentTime / 60) % 60);
console.log('time m',m);
let sep = ':';
time.innerHTML = `${m}${sep}${s}`;
}
const updateProgress = function(videoEl = this) {
let progress = document.querySelector('.video__progress');
progress.setAttribute('aria-valuenow', getVideoProgress(videoEl));
progress.style.setProperty('--width', getVideoProgressNormal(videoEl));
}
function startProgressUpdate() {
updateProgress(video);
t = window.requestAnimationFrame(startProgressUpdate);
}
function stopProgressUpdate() {
if (t) {
window.cancelAnimationFrame(t);
}
}
const videoLoadedMeta = function() {
let progress = document.querySelector('.video__progress');
progress.setAttribute('aria-valuemax', this.duration);
}
/**
* getVideoProgressNormal
* Returns the current video progression as a normal of 1 (ex: 50% finished is 0.5)
* decimals = 4 // Minimum 4 decimals is recommended for a smooth 60fps update
*/
const getVideoProgressNormal = (videoEl = this, decimals = 4) => {
return (videoEl.currentTime / videoEl.duration).toFixed(decimals);
}
const getVideoProgress = (videoEl = this, decimals = 4) => {
return (videoEl.currentTime).toFixed(decimals);
}
video.addEventListener('click', togglePlay);
video.addEventListener('timeupdate', updateTime);
video.addEventListener('playing', startProgressUpdate);
video.addEventListener('ended', stopProgressUpdate);
video.addEventListener('pause', stopProgressUpdate);
video.addEventListener('loadedmetadata', videoLoadedMeta);
Просьба вас сбросить немного света!
Спасибо!
![enter image description here](https://i.stack.imgur.com/AKtlz.jpg)