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(); 
    }); 
    }); 
});