如何用静音道具解压html5视频

Question

我已经创建了一个简单的视频块(用于移动自动启动)，但现在我无法更改静音状态.

我用了那个存储库，小提琴链接就太棒了。

到目前为止，我一直没有运气地尝试过这个。

<video width="640" height="264" muted autoplay webkit-playsinline src="'+videoURL+'"></video>'

JS

$(document).on("click",".containerVolume",function(e){
        if(isMuted){
            $('video').prop('muted', false);
        }
        else{
            $('video').prop('muted',true);
        }
});

var videos = document.querySelectorAll('video');
      if (location.search === '?enabled=false') 
      {
      } else if (location.search === '?enabled=true') {
           enableVideos(false);
      } else {
         enableVideos();
      }
      function enableVideos(everywhere) {
          for (var i = 0; i < videos.length; i++) {
             window.makeVideoPlayableInline(videos[i], !videos[i].hasAttribute('muted'), !everywhere);
          }
      }

Answer 1

试试这个：

function toggleMute() {

  var video=document.getElementById("myVideo");

  video.muted = !video.muted;

}

检查示例这里

如果您自己的代码不起作用，请尝试将一个id添加到您希望单击的视频/元素中，并使用：

var video=document.getElementById("myVideo") ;   

$(video).on("click", function(e){
  video.muted = !video.muted;
});

Answer 2

格伦的回答很在行，我只想说明为什么它不适用于onür，OP (以及我自己，这就是我来到这里的原因)。

基本上可以归结为静音属性和静音属性是不同的。它似乎没有很好的文档(我已经发现了)，但我所经历的行为是，静音属性(通过element.getAttribute和相关方法访问)影响初始状态，但切换它没有任何影响。从另一方面来说。静音属性(正如格伦指出的，通过videoEl.muted访问)似乎是如何在页面加载后更改静音状态。

Answer 3

你应该使用videoEl.muted

​

var video = document.getElementById('video');

function toggleMute(){
  video.muted = !video.muted;
}

<video id="video" width="300" controls muted src="http://www.w3schools.com/html/mov_bbb.mp4"></video>

<br><br>
<a onclick="toggleMute()">Toggle Mute</a>

​