HTML Video mute button

问题

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:

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.

回答2:

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'))
});

来源：https://stackoverflow.com/questions/26478062/html-video-mute-button