How to mute an html5 video player using jQuery
JavascriptJqueryHtmlVideoMuteJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
$("video").prop('muted', true); //mute
AND
$("video").prop('muted', false); //unmute
See all events here
(side note: use attr if in jQuery < 1.6)
Solution 2 - Javascript
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).
Solution 3 - Javascript
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