1

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

1
  • try to add your sample code and try to explain what you already tried and what problems you came up with. You can use jsfiddle to build an example where people can work with
    – pscheit
    Oct 21, 2014 at 2:56

2 Answers 2

7

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'))
});
2
  • 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.
    – Stender
    Jul 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
2

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.

1
  • I have two icons, one that is of a speaker, and one that is a mute icon. i want them to change accordingly
    – Kai
    Oct 21, 2014 at 3:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.