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