播放HTML5video时如何暂停特定的HTML5音频

Question

参考http://america.wtf/Shadex

该站点具有自动播放的音频。 但是，有一个视频页面。 我想要它，以便当您播放视频时它会自动暂停音乐

 <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> 

Answer 1

请参阅下面的更新示例，它将：

• 播放视频时暂停音频
• 暂停视频时播放音频

请注意，我从video元素中删除了onClick ，还为<video>元素添加了一个明确的id ，以使直接引用它更容易

<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>