Воспроизвести следующий набор видео, как только видео будет завершено, например, статус приложения - PullRequest
0 голосов
/ 22 января 2020

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 Просьба вас сбросить немного света!

Спасибо!

enter image description here

...