Question

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

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

非常感谢

--- HTML WITH VIDEO ---

@Html.ValidationMessageFor

Answer 1

＆＃13;

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

＆＃13;

Answer 2

只需获得对您视频的引用，您就可以将其静音/取消静音

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

Answer 3

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

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

这是一个过程：

制作一个类别为vPlayers的所有视频元素的NodeList（.vPlayer）。
获取NodeList（vPlayers）并将其转换为数组（vArray）。
EventListeners被添加到按钮vPlay和vMute中，一旦触发，点击后，回调函数将遍历vArray。
将检查每个视频元素（.vPlayer a.k.a. vArray[i]）：
- 查看是否正在播放视频（playToggle功能），或者......
- 查看它是否已静音（muteToggle功能）。
在初步状态检查后，playToggle和muteToggle将根据vPlayer的状态播放/暂停和静音/取消静音每个vPlayer。

＆＃13;

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 = "";
  }
}

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

将页面上的所有音频静音

3 个答案: