1

Вставляю несколько плееров на страницу, но проигрывается видео только в одном из них.

Делал запуск плеера напрямую через коллекцию 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>

1 ответ 1

2

Один из вариантов решения - при клике на кнопку смотреть в каком блоке video-container произошел клик по кнопке play play-btn, искать в нем тег видео и запускать его.

C помощью jQuery это будет выглядеть так:

playBtn.addEventListener('click', (e) => {
  $(e.currentTarget).closest('.video-container').find('video').get(0).play();
});

На чисто js будет так:

 playBtn.addEventListener('click', (e) => {
        e.currentTarget.closest('.user-info').querySelector('video').play();
 });

С остальными методами по аналогии.

Upd:

Вот полное решение на чистом js:

window.onload = function() {

  const video = document.querySelectorAll('.video-player');
  const display = document.querySelectorAll('.display-status');
  const positionBar = document.querySelectorAll('.video-position');
  const playBtn = document.querySelectorAll('.play-btn');
  const pauseBtn = document.querySelectorAll('.pause-btn');
  const stopBtn = document.querySelectorAll('.stop-btn');
  const fastBtn = document.querySelectorAll('.fast-btn');
  const slowBtn = document.querySelectorAll('.slow-btn');
  const resetSpeed = document.querySelectorAll('.reset-speed');

  video.forEach(video => video.addEventListener('timeupdate', (e) => { 
      const videoWrap = e.currentTarget.closest('.video-container'),
            video = videoWrap.querySelector('video');

      videoWrap.querySelector('.video-position').style.width =(video.currentTime / video.duration * 100)  + "%";
      videoWrap.querySelector('.display-status').innerText = (Math.round(video.currentTime * 100) / 100) + " sec";

  }));

  video.forEach(video => video.addEventListener('playing', (e) => {
        e.currentTarget.closest('.video-container').querySelector('.display-status').innerText = 'воспроизведение';
  }));

  video.forEach(video => video.addEventListener('pause', (e) => {
      e.currentTarget.closest('.video-container').querySelector('.display-status').innerText = 'пауза';
  }));

  playBtn.forEach(playButton => playButton.addEventListener('click', (e) => {
      e.currentTarget.closest('.video-container').querySelector('video').play();
  }));

  pauseBtn.forEach(pauseButton => pauseButton.addEventListener('click', (e) => {
      e.currentTarget.closest('.video-container').querySelector('video').pause();
  }));

  stopBtn.forEach(stopButton => stopButton.addEventListener('click', (e) => {
      const video = e.currentTarget.closest('.video-container').querySelector('video');
      video.pause();
      video.currentTime = 0;
  }));

  fastBtn.forEach(fastButton => fastButton.addEventListener('click', (e) => {
      const video = e.currentTarget.closest('.video-container').querySelector('video');
      video.play();
      video.playbackRate = 2;
  }));

  slowBtn.forEach(slowButton => slowButton.addEventListener('click', (e) => {
      const video = e.currentTarget.closest('.video-container').querySelector('video');
      video.play();
      video.playbackRate = 0.5;
  }));

  resetSpeed.forEach(resetButton => resetButton.addEventListener('click', (e) => {
      const video = e.currentTarget.closest('.video-container').querySelector('video');
      video.play();
      video.playbackRate = 1;
  }));
}
6
  • Решение на jQuery конечно лаконично. Желательно видеть решение на чистом JS. Для лучшего понимания, что к чему и почему делается. Без тупого копипаста кода.
    – rookie
    16 окт 2018 в 11:54
  • Добавил решение на чистом js
    – onovikov
    16 окт 2018 в 13:30
  • Пример рабочий только для первого плеера на странице. С несколькими плеерами на странице такое решение не действует. Не видит почему то остальные плееры ниже первого.
    – rookie
    17 окт 2018 в 8:45
  • Странно, на jsfiddle.net есть исходники?
    – onovikov
    17 окт 2018 в 9:01
  • 1
    Вот так работает jsfiddle.net/6bursa81/7
    – onovikov
    17 окт 2018 в 10:05

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.