How to mute an html5 video player using jQuery

Question

I've found how to pause and play the video using jquery

$("video").get(0).play();
$("video").get(0).pause();

But I can't find the mute button, if there isn't a jquery solution, I'm fine with just an onclick js solution. I need it asap.

Also is there a way to fix the mute delay? I want it to mute/unmute the sound as soon as the button is clicked.

Answer 1

$("video").prop('muted', true); //mute

AND

$("video").prop('muted', false); //unmute

See all events here

(side note: use attr if in jQuery < 1.6)

Answer 2

If you don't want to jQuery, here's the vanilla JavaScript:

///Mute
var video = document.getElementById("your-video-id");
video.muted= true;

//Unmute
var video = document.getElementById("your-video-id");
video.muted= false;

It will work for audio too, just put the element's id and it will work (and change the var name if you want, to 'media' or something suited for both audio/video as you like).

Answer 3

Are you using the default controls boolean attribute on the video tag? If so, I believe all the supporting browsers have mute buttons. If you need to wire it up, set .muted to true on the element in javascript (use .prop for jquery because it's an IDL attribute.) The speaker icon on the volume control is the mute button on chrome,ff, safari, and opera for example