静音页面上的所有音频

Question

我有一个登录页面，用户可以在其中登录和注册，后台是该网站的预告片。视频有音频，是一个 .mp4 文件。

我的主要目标是获得一个功能，用户可以单击某个按钮，所有页面音频都将被静音。

非常感谢

---带有视频的HTML---

<div class="Main animated fadeIn">
        <!--To make the Site Unique, I have included Several Trailers for the Main Landing Page !-->
         <video autoplay="" id="bgvid" loop="" poster="polina.jpg"><source src=
        "img/indexMV.mp4" type="video/mp4"> <source src="img/indexMV.mp4"
        type="video/mp4"></video>
    </div>

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<button id="mute_all">Mute all</button> | 
<button id="unmute_all">UnMute all</button>
<br/>
    <script>
    $(document).ready(function(){

       /*** Mute all ***/
       $('#mute_all').on('click',function(){

          /*** Mute all video and audio on page ***/
          $('body video, body audio').each(function(){
             /*** Do it here globally ***/
             $(this).prop('muted', true);
          });

       });
      
       /*** UnMute all ***/
       $('#unmute_all').on('click',function(){

          /*** Un Mute all video and audio on page ***/
          $('body video, body audio').each(function(){
             /*** Do it here globally ***/
             $(this).prop('muted', false);
          });

       });
      
      
    });
    </script>
    <h4>Video</h4>
    <video id="myVideo" width="320" height="176" controls>
      
      <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
      <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
      <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg">
      Your browser does not support HTML5 video.
    </video>
    
    <br/>
<h4>AUdio</h4>
    
    <audio width="320" height="176" controls>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
      <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm">
      <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg">      Your browser does not support HTML5 video.
    </audio>

Answer 2

只需获取您的视频的参考，您就可以将其静音/取消静音

var vid = document.getElementById("bgvid");
vid.muted = true; // to mute
vid.muted = false; // to unmute

Answer 3

您希望能够静音任何和所有音频源，然后您需要能够收集对所有视频和/或音频播放实例的引用。这就是这个演示的作用：

• 单独或一次播放/暂停 5 个视频。
• 单独或一次全部静音/取消静音。

这是过程：

• 创建一个包含.vPlayer类的所有视频元素的NodeList (vPlayers)。
• 获取 NodeList (vPlayers) 并将其转换为数组 (vArray)。
• 事件监听器被添加到按钮vPlay和vMute，一旦触发，通过点击，回调函数将遍历vArray。
• 将检查每个视频元素 (.vPlayer a.k.a. vArray[i])：
  • 查看它是否正在播放视频（playToggle 函数），或者...
  • 查看是否静音（muteToggle 函数）。
• 初步状态检查后，playToggle 和muteToggle 将根据vPlayer 的状态播放/暂停和静音/取消静音每个vPlayer。

var vPlayers = document.querySelectorAll(".vPlayer");
var vArray = Array.prototype.slice.call(vPlayers);
var vMax = vArray.length;


var vPlay = document.getElementById("vPlay");
vPlay.addEventListener('click', function(e) {
  for (var p = 0; p < vMax; p++) {
    playToggle(p);
  }
}, false);

var vMute = document.getElementById("vMute");
vMute.addEventListener('click', function(e) {
  for (var m = 0; m < vMax; m++) {
    muteToggle(m);
  }
}, false);

function playToggle(idx) {
  if (vArray[idx].paused) {
    vArray[idx].play();
    vPlay.innerHTML = "❚❚";
  } else {
    vArray[idx].pause();
    vPlay.innerHTML = "►";
  }
}

function muteToggle(idx) {
  if (vArray[idx].muted) {
    vArray[idx].muted = false;
    vMute.innerHTML = "?";
  } else {
    vArray[idx].muted = true;
    vMute.innerHTML = "?";
  }
}

#vPlay {
  font-size: 27px;
}
button {
  margin: 15px;
  width: 54px;
  line-height: 36px;
  font: 300 24px'Consolas';
  color: #EEE;
  background: rgba(0, 0, 0, .4);
  border: 3px outset grey;
  border-radius: 9px;
  cursor: pointer;
  pointer-events: auto;
}
button:hover {
  background: transparent;
  color: #00D;
  border: 3px inset blue;
}
.vBox {
  display: table-cell;
}
.vControl {
  width: 295px;
  height: 160px;
  display: table;
}

<section class="vBox">
  <video class="vPlayer" poster="https://glpjt.s3.amazonaws.com/so/av/vs21s3.png" width="320" height="180" controls>
    <source src="https://glpjt.s3.amazonaws.com/so/av/vs21s3.mp4" type="video/mp4">
  </video>

  <video class="vPlayer" poster="https://glpjt.s3.amazonaws.com/so/av/vs12s3.png" width="320" height="180" controls>
    <source src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" type="video/mp4">
  </video>

  <video class="vPlayer" poster="https://glpjt.s3.amazonaws.com/so/av/vs8s3.png" width="320" height="180" controls>
    <source src="https://glpjt.s3.amazonaws.com/so/av/vs8s3.mp4" type="video/mp4">
  </video>

</section>


<section class="vBox">
  <video class="vPlayer" poster="https://glpjt.s3.amazonaws.com/so/av/vs34s3.png" width="320" height="180" controls>
    <source src="https://glpjt.s3.amazonaws.com/so/av/vs34s3.mp4" type="video/mp4">
  </video>

  <video class="vPlayer" poster="https://glpjt.s3.amazonaws.com/so/av/vs2s3.png" width="320" height="180" controls>
    <source src="https://glpjt.s3.amazonaws.com/so/av/vs2s3.mp4" type="video/mp4">
  </video>
  <form id="vControl" name="vControl">
    <button id="vPlay">►</button>
    <button id="vMute">?</button>
  </form>
</section>