Question

当您使用jQuery按下按钮时，我尝试制作视频静音并取消静音。将视频静音正在工作，取消静音不会。

这是我到目前为止所得到的......

jQuery的：

$('#volume').click(function(){
   $(this).toggleClass('mute unmute');
});

$('.mute').click(function(){
   $("video").prop('muted', true);
});

$('.unmute').click(function(){
   $("video").prop('muted', false);
});

HTML：

<div id="volume" class="mute"></div>

<video id=""v class="videoPlayer" loop autoplay>
  <source type="video/mp4" src="assets/vid/bg.mp4">
</video>

CSS：

#volume {
height:50px;
width:50px;
background:red;}

有任何建议如何解决这个问题？

Answer 1

http://jsbin.com/mute-unmute-video-jquery/ （Chrome）

所有你需要的：

$('#volume').click(function(){
   $('video')[0].muted ^= 1;  // Toggle mute 1/0
   $(this).toggleClass('mute unmute');
});

_{BTW您的代码无效，因为您的目标是动态生成的className .unmute选择器，这意味着使用.on()方法进行委派。}

还略微修改了CSS：

#volume {
  height:50px;
  width:50px;
  /* Don't use background here */
}
.mute{
  background:red;
}
.unmute{
  background:blue;
}

P.S：你也可以使用 one class only

更简单地做到这一点

静音/取消静音视频无效 - jQuery

1 个答案: