Как правильно переписать скрипт для множество элементов видео?

Question

[konoplitskiy]

Есть скрипт который работает только с одним видео, и только с одной кнопкой прикрепленной к ниму.
Задача чтоб при клике на кнопку воспроизводилось именно то видео и ставилось на паузу(Их может мыть много видео и соответственно каждому своя кнопка). Прикрепляю картинку для внесения ясности. Благодарю за ответ

var overlay = document.getElementById('overlay');
var vid = document.getElementById('video');

if(overlay.addEventListener){
    overlay.addEventListener("click", play, false)
  }else if(overlay.attachEvent){
    overlay.attachEvent("onclick", play)
  }

function play() { 
    if (vid.paused){
        vid.play(); 
        overlay.className = "o";
    }else {
        vid.pause(); 
        overlay.className = "";
    }
}

Comments

[Максим]

На странице не должно быть несколько элементов с одинаковым id, а, судя по коду, у вас это не соблюдается. Задайте вашим элементам класс, берите всю коллекцию элементов, проходите по ней и для каждого элемента делайте обработку его кнопки

Answer 1

[Александр]

Пауза, когда другой плеер начинает воспроизводиться. Одинаковые классы, разные id.

$(".video-player").each(function (videoIndex) {
  var videoId = $(this).attr("id");
  video(videoId).ready(function() {
    this.on("play", function(e) {
      $(".video-player").each(function (index) {
        if (videoIndex !== index) {
          this.player.pause();
        }
      });
    });
  });
});