Button does not mute my video

Question

I have some HTML code for a video and I need to create a button to mute the voice of this video. I have written some jquery code for this button, but when I click the button, my page reloads and the video starts from the beginning (not muted).

<div class="sl-video">
<video  id="mainVideo" width="100%" height="600" autoplay="autoplay" loop="loop">
    <source src="../Root/Videos/3/24-08-2016/270484_KL_2015_F.mp4" type="video/mp4">
</video>
</div>
<button id="mute-video">Toggle Mute</button>

And jQuery:

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

});

score 0 · Accepted Answer · answered Aug 25 '16 at 09:04

try with e.preventDefault() event

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

score 0 · Answer 2 · answered Aug 25 '16 at 09:10

try with return false; statement like below:

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

score -1 · Answer 3 · edited May 23 '17 at 12:15

-1

could it be a jquery version problem? maybe you could try with 'attr' instead of 'prop': look here

edited May 23 '17 at 12:15

Community

1
1

answered Aug 25 '16 at 09:01

user1555320

485
2
8

This is not an answer, it possibly should have been a comment, but `muted` is a prop, not an attribute! – Jamiec Aug 25 '16 at 09:12
Have you REALLY read what I wrote? regardless of what it is: "Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes." quoting from official jquery documentation – user1555320 Aug 25 '16 at 09:16
I read *exactly* what you wrote. There is a good chance that if your "answer" contains questions, then it's not an answer - you're seeking clarification, which is *not* what answers are for! And besides, if this user is using a ~6 year old version of jQuery, then they deserve whatever problems they're experiencing! In actual fact, judging by the accepted answer, the problem was nothing to do with the use of prop/attr at all. – Jamiec Aug 25 '16 at 09:20

Button does not mute my video

3 Answers3