Вставляю несколько плееров на страницу, но проигрывается видео только в одном из них.
Делал запуск плеера напрямую через коллекцию dom элементов по типу:
var video = document.querySelectorAll('.video-player');
var playBtn = document.querySelectorAll('.play-btn');
playBtn[0].addEventListener('click', function () {
video[0].play();
});
Как добиться чтобы каждый добавленный плеер на странице проигрывал видео ? При этом имена классов у всех плееров были одинаковыми. Без задания каждому плееру нового имени класса.
Нынешний код плеера расположен ниже:
'use strict';
var video = document.querySelectorAll('.video-player');
var display = document.querySelector('.display-status');
var positionBar = document.querySelector('.video-position');
var playBtn = document.querySelector('.play-btn');
var pauseBtn = document.querySelector('.pause-btn');
var stopBtn = document.querySelector('.stop-btn');
var fastBtn = document.querySelector('.fast-btn');
var slowBtn = document.querySelector('.slow-btn');
var resetSpeed = document.querySelector('.reset-speed');
window.onload = function() {
video.onplaying = function() {
display.innerHTML = 'воспроизведение';
}
video.onpause = function() {
display.innerHTML = 'окончание';
}
}
function progressUpdate() {
positionBar.style.width = (video.currentTime / video.duration * 100) + "%";
display.innerHTML = (Math.round(video.currentTime*100)/100) + " sec";
}
playBtn.addEventListener('click', function () {
video.play();
});
playBtn.addEventListener('click', function () {
video.play();
});
pauseBtn.addEventListener('click', function () {
video.pause();
});
stopBtn.addEventListener('click', function () {
video.pause();
video.currentTime = 0;
});
fastBtn.addEventListener('click', function () {
video.play();
video.playbackRate = 2;
});
slowBtn.addEventListener('click', function () {
video.play();
video.playbackRate = 0.5;
});
resetSpeed.addEventListener('click', function () {
video.play();
video.playbackRate = 1;
});
<div class="video-container">
<video class="video-player" ontimeupdate="progressUpdate()">
<source src="" type="video/mp4"/>
</video>
<div class="video-duration">
<div class="video-position">
<span class="display-status">продолжительность</span>
</div>
</div>
<div class="list-buttons">
<button class="play-btn">Play</button>
<button class="pause-btn">Pause</button>
<button class="stop-btn">Stop</button>
<button class="fast-btn">Fast</button>
<button class="slow-btn">Slow</button>
<button class="reset-speed">Reset speed</button>
</div>
</div>