Video mute or unmute with jQuery

Initially when the video is loaded it will be mute.  If user wants then click on the unmute button to listen the sound.

There is a button used with id #mute-video, its a toggle button which will work both ways mute and unmute.  

Simple condition in the jquery for the video element with property muted true or false will do the magic for you.  

In the below code you will find another line removeClass(muteOn) and addClass(muteOff), that is used for adding and removing a class to the button element.  Using that class you can style the button with mute/unmute icon.

HTML

<button id="mute-video">Toggle Mute</button>

  <video controls="" src="http://s3.amazonaws.com/servingsites-videos/firstbaptistchurchofnorfolk/sample-welcome-video-2.mp4" width="240"></video>

JQUERY SCRIPT

  $("#hero-video-wrapper").prop('muted', true);

$("#toggleMuteBtn").click( function (){

    if( $("#hero-video-wrapper").prop('muted') ) 

    {

        $("#hero-video-wrapper").prop('muted', false);

$(this).removeClass("muteOn").addClass("muteOff");

    }

    else {

    $("#hero-video-wrapper").prop('muted', true);

$(this).removeClass("muteOff").addClass("muteOn");

    }

});