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

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

• javascript
• jquery
• html
• html5-video

Share Improve this question Follow asked Oct 21, 2014 at 2:39 KaiKai 2911 gold badge11 silver badge55 bronze badges 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 Commented Oct 21, 2014 at 2:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

demo - http://jsfiddle/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'))
});

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.