CODEWITHSUNDEEP
jqueryhtmlcssvideo
user3716760
user3716760

Reputation: 25

mute/unmute video not working - jQuery

I'm trying to make a video mute and unmute when you press a button using jQuery. Muting the video is working, unmuting it doesn't.

This is what I got so far...

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

Any suggestions how to fix this?

Upvotes: 0

Views: 3545

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 205987

http://jsbin.com/mute-unmute-video-jquery/ (Chrome)

All you need:

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

BTW Your code was not working cause you were targeting dynamically generated className .unmute selector which implies the use of .on() method with delegation.

Also slightly modified your CSS:

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

P.S: You can also do it much simpler using one class only

Upvotes: 1

Related Questions