I have tried to create a function in javascript to mute a html video, and change the icon below to a mute icon that i have downloaded. Need Help. The javascript has to be able to work along side jquery as well
2 Answers
demo - http://jsfiddle.net/victor_007/6cc9mhbb/
on click of the button the icon will change
$("video").prop('muted', true);
$(".mute-video").click(function () {
if ($("video").prop('muted')) {
$("video").prop('muted', false);
$(this).addClass('unmute-video'); // changing icon for button
} else {
$("video").prop('muted', true);
$(this).removeClass('unmute-video'); // changing icon for button
}
console.log($("video").prop('muted'))
});
-
That was perfect - I needed to add that the button should look for the nearest video, and not just unmute all muted videoes, but really nice.– StenderJul 31, 2019 at 8:10
-
above demo is okay but in the jsfiddle example background images no sowing so i added (mute on/off images) jsfiddle.net/faL1vjcn Jul 22, 2021 at 13:23
The question is fairly vague, so I'm guessing that this will answer your question. If you are using video tags in HTML
<video width="320" height="240" controls muted>
<source src="x" type="video/x">
<source src="x" type="x">
</video>
For Java script
<video id="myVideo" width="x" height="x" controls>
....
</video>
<button onclick="enableMute()" type="button">Mute sound</button>
<script>
var vid = document.getElementById("myVideo");
function enableMute() {
vid.muted = true;
}
</script>
As for your second questions, I don't quite understand it, please elaborate.
-
I have two icons, one that is of a speaker, and one that is a mute icon. i want them to change accordingly– KaiOct 21, 2014 at 3:25