title: Toggle mute audio of video on click
body: <p>I'am trying to mute the audio of a video on click, but for some reason it won't mute..</p>
  
  <p>html:</p>
  
  <pre><code>&lt;video src="background/background1.mp4" autoplay="autoplay" loop="loop" id="background"&gt; &lt;/video&gt;
  
          &lt;img src="button/audio_on.png" id="audio"/&gt;
  </code></pre>
  
  <p>jquery/javascript solutions I have tried:</p>
  
  <pre><code>$('#audio').click(function() {
           if( $("#background").prop('muted', true) ) {
                $("#background").prop('muted', false);
                alert('music paused');
            } else {
                $("#background").prop('muted', true);
                alert('music playing');
            }
          });
  </code></pre>
  
  <p>Note: It does alert 'music paused' but never alerts 'music playing'</p>
  
  <p>second method I've tried (note: it does change the img source):</p>
  
  <pre><code> //change music icon
              $("#audio").on('dblclick', function(){
                  $("#audio").attr("src","button/audio_on");
              document.getElementById("#background").volume = 1;
  
  
              });
  
                  $("#audio").on('click', function(){
               $("#audio").attr("src","button/audio_off");
                      document.getElementById("#background").volume = 0;
  
              });
  </code></pre>
  
  <p>Does anyone know why it won't mute the audio of my video?</p>