javascript - 播放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，并且还向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>