HTML5 Video Toggle Mute On Click?

Question

I'm trying to toggle mute by clicking on the video.

I am able to un-mute the video when clicking using this code:

$(document).ready(function(){

    $("video").prop('muted', true);

    $("video").click( function (){
        if( $("video").prop('muted', true) )
        {
            $("video").prop('muted', false)
        }
    });
});

http://jsfiddle.net/Edf8m/7/

Now I just want to be able to click again and it be muted.

Answer 1

You should be able to solve your problem with a simple boolean toggle.

$("video").click(function () {
    $(this).prop("muted", !$(this).prop("muted"));
});