addEventListener конфликтует с медиа

Question

Я пытаюсь найти решение для этого: у меня много элементов на странице, и я реализую следующий код, который делает то, что мне нужно.

document.addEventListener(
  'play',
  function (evt) {
    if (document.$_currentlyPlaying) {
      document.$_currentlyPlaying.pause()
      document.$_currentlyPlaying.load()
    }
    document.$_currentlyPlaying = evt.target
  },
  true
)

Проблема в том, что у меня естьЗацикливание видеофайла на странице также осуществляется этим решением.Поэтому мне нужно настроить таргетинг только на аудиоэлементы (или иные указанные элементы).Я пытался использовать это на уроках, но это, похоже, не работает:

var x = document.getElementsByClassName('class')
for (var i = 0; i < x.length; i++) {
  x[i].addEventListener(
    'play',
    function (evt) {
      if (x.$_currentlyPlaying) {
        x.$_currentlyPlaying.pause()
        x.$_currentlyPlaying.load()
      }
      x.$_currentlyPlaying = evt.target
    },
    true
  )
}

Я не уверен, что я делаю неправильно или как делать то, что я хочу, так как я не очень знаком с JSи пытаюсь объединить код, который я нашел в поиске решений.

Answer 1

Взаимоисключающее воспроизведение

"... имеет много элементов на странице и выполняет следующий код, который делает то, что мне нужно."

Предполагается, что необходимо взаимоисключающее воспроизведение (на данный момент называется MEP).MEP - это общее поведение группы медиапроигрывателей, при котором, когда один проигрыватель начинает воспроизводить свои медиафайлы, другие проигрыватели либо приостанавливают, либо прекращают воспроизведение.

---

Plunker

Демо

Подробности прокомментированы в демо.

Примечание: Звук может быть не слышен, но вы заметите, что только одинМетка <audio> будет воспроизводиться, в то время как две другие останавливаются и загружаются.Перейдите к этому Plunker для полнофункциональной демонстрации.

// Collect all <audio> tags into a NodeList
var clips = document.querySelectorAll('audio');

/* 
Loop through the NodeList and register each <audio>
to the playing event.
When triggered, callback function mep() is called.
*/
for (let i = 0; i < clips.length; i++) {
  clips[i].addEventListener('playing', mep);
}

function mep(e) {
  /* 
  e.target is the <audio> that started playing
  On each loop check if <audio> is NOT e.target
  and then pause and load it.
  */
  for (let i = 0; i < clips.length; i++) {
    if (clips[i] !== e.target) {
      clips[i].pause();
      clips[i].load();
    }
  }
}

video, section {
  float: left;
  width: 49%;
}

<video src='https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005609.mp4' loop controls autoplay width='49%'></video>
<section>
  <audio src='https://od.lk/s/NzlfOTEyMzgyNF8/jerky.mp3' controls></audio>
  <audio src='https://od.lk/s/NzlfOTEwMzM5OV8/righteous.mp3' controls></audio>
  <audio src='https://od.lk/s/NzlfOTEyMzg0OV8/misty_forest.mp3' controls></audio>
</section>