Question

Using HTML5 I have 2 Audio elements and 1 video element on a page.
Quite simply I’d like to add JavaScript functionality that prevents them from being played simultaneosly.
My main problem is how to target the click events of the default player.
The HTML is below, thanks;

<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

How I’d do it (using jQuery for simplicity, though not required):

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