Предотвращение одновременного проигрывания HTML5 видео и аудио элементов

Question

Используя HTML5, у меня есть 2 аудио элемента и 1 видео элемент на странице.Проще говоря, я хотел бы добавить функциональность JavaScript, которая предотвращает их одновременное воспроизведение.Моя основная проблема заключается в том, как настроить таргетинг на события клика по умолчанию для игрока.HTML ниже, спасибо;

<section id="mp3Section">
<h2>MUSIC</h2>
<ul>
<li>Lovers Pass<audio id="audioLP" controls="controls" preload="auto" autobuffer>
<p class="redText">Sorry. Your browser does not support this audio element</p>
<source src="music/loversPass.mp3" />
<source src="music/loversPass.wav" />
</audio></li>

<li>All The Fun<audio id="audioATF" controls="controls" preload="auto" autobuffer="autobuffer">
<p class="redText">Sorry. Your browser does not support this audio element</p>
<source src="music/allTheFun.mp3" />
<source src="music/allTheFun.wav" />
</audio></li>
</ul>
</section>

<section id="videoSection">
<h2>Video</h2>
<video id="vidScreen" controls  poster="images/vidThumb.jpg">
<source src="videos/loversPassOGV.ogg"/>
<source src="videos/loversPassVid.mp4" />
</video>
</section>

Answer 1

Как бы я это сделал (для простоты использую jQuery, хотя и не обязательно):

$('audio,video').bind('play', function() {
  activated = this;
  $('audio,video').each(function() {
    if(this != activated) this.pause();
  });
});

Answer 2

Элементы audio и video имеют события, которые вы можете перехватить. См. Например https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox.

Возможно, вы могли бы сделать что-то вроде этого (не проверено):

var allMediaIds = ["audioLP", "audioATF", "vidScreen"];
var allMedia = [];

for (var i = 0, len = allMediaIds.length; i < len; i++) {
  allMedia.push(document.getElementById(allMediaIds[i]));
}

function loopAllMedia(callback) {
   for (var i = 0, len = allMedia .length; i < len; i++) {
      callback(allMedia[i]);
   }
}

loopAllMedia(function(element) {
  element.addEventListener("play", function() {
    loopAllMedia(function(otherElement) {
      if (element != otherElement)
        otherElement.pause();
    });
  });
});