jquery - 按钮无法使我的视频静音

Question

我有一些视频的 HTML 代码，我需要创建一个按钮来静音该视频的声音。我已经为此按钮编写了一些 jquery 代码，但是当我单击该按钮时，我的页面会重新加载，并且视频会从头开始播放(不会静音)。

<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>

和 jQuery:

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

});

Answer 1

尝试使用e.preventDefault()事件

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