防止同时播放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();
  });
});