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);
      }
   });

Answer 2

尝试return false;语句，如下所示：

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

Answer 3

可能是jquery版本问题吗？也许你可以试试'attr'代替'prop'：看here

按钮不会使我的视频静音

3 个答案: