Video mute/unmute with jQuery

Question

I'd like to make a mute/unmute button in jQuery. I've done some searching on Stackoverflow and this is what I managed to do so far:

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

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

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

});

but for some reason it's only able to unmute, not to mute back.

Any idea what's wrong with the code?

Cavitation

Code seems ok to me, have you checked if there is any errors in console – Minh

If you want to unmute your video: $("video").prop('muted', false); – Nearsighted

Answer 1

When you're doing if( $("video").prop('muted', true) ) you're both setting the property to true and then ask if it's true.

Changing the condition to if( $("video").prop('muted') ) solves the problem - Here's an example.

Also note this will work on all videos on a page so if you have more than one player it might get confusing.

Vezza

Ronny, big thnx, that worked! If it comes to "video", I used it as a temporary solution - now I checked with the video ID and it works as well. – Cavitation

I came across this post and shortened the code: $("video").prop('muted', !$("video").prop('muted'))) – Efficient