如何玩HTML5video時

參考http://america.wtf/Shadex 如何玩HTML5video時

該網站暫停特定HTML5音頻具有該音頻播放自動。但是有一個視頻頁面。我想有這樣，當你播放視頻，它自動暫停音樂

<div id="videos" style="z-index:1" onClick="document.getElementById('sitemusic').pause();"><br /> 
 
<div align="center" id="videobox">Splash 
 
<video style="z-index:-1;" width="400" controls> 
 
    <source src="media/videos/splash.mp4" type="video/mp4"> 
 
    <source src="media/videos/splash.ogg" type="video/ogg"> 
 
    Your browser does not support HTML5 video. 
 
</video> 
 
</div> 
 
</div> 
 

 
<audio id="sitemusic" controls autoplay> 
 
    <source src="media/turbo_grid.ogg" type="audio/ogg"> 
 
    <source src="media/turbo_grid.mp3" type="audio/mpeg"> 
 
Your browser does not support the audio element. 
 
    <script> 
 
    var video = document.currentScript.parentElement; 
 
    video.volume = 0.1; 
 
    </script> 
 
</audio>

來源

2016-07-27 Korey Nadolny

有你看着設置在事件偵聽器的東西的視頻元素響應onPlay暫停音頻？ – Offbeatmammal

不知道如何做到這一點。你有沒有例子？ –

參見下面的更新的樣本，這將：

暫停時播放音頻視頻
暫停視頻時播放音頻

注意到我從視頻元素取出onClick，並且還增加了明確的id到<video>元素，使直接引用更容易

<div id="videos" style="z-index:1"><br /> 
<div align="center" id="videobox">Splash 
<video style="z-index:-1;" width="400" controls id="video"> 
    <source src="media/videos/splash.mp4" type="video/mp4"> 
    <source src="media/videos/splash.ogg" type="video/ogg"> 
    Your browser does not support HTML5 video. 
</video> 
</div> 
</div> 

<audio id="sitemusic" controls autoplay> 
    <source src="media/turbo_grid.ogg" type="audio/ogg"> 
    <source src="media/turbo_grid.mp3" type="audio/mpeg"> 
    Your browser does not support the audio element. 
    <script> 
    var audio = document.currentScript.parentElement; 
    audio.volume = 0.1; 

    var video = document.getElementById("video"); 
    // this event listener reacts to "play" happening on video element and enacts pause on the audio element 
    video.addEventListener('play', function(){document.getElementById("sitemusic").pause()},false); 
    // this event listener reacts to "pause" happening on video element and enacts play on the audio element 
    video.addEventListener('pause', function(){document.getElementById("sitemusic").play()},false); 
    </script> 
</audio>

來源

2016-07-30 02:01:21 Offbeatmammal

如何玩HTML5video時

回答

相關問題