尝试使用onclick在html视频上切换声音

时间:2019-04-11 16:16:43

标签: html5 audio video

我正在尝试使用onclick功能在html5视频上切换音频,以便当您单击视频时音频被静音,而再次单击时音频被静音。

但是,当我单击视频时,什么也没发生

这是我到目前为止所做的:

<p>
<video autoplay="" loop="" muted="" playsinline="" preload="Metadata" onclick="function()" style=" padding-top:15%; width:100%;  height:auto; ">

<source src="Video"></video>

<script>
$(document).ready(function(){

$("video").prop('muted', true);

$("video").click( function (){
    $(this).prop('muted', !$(this).prop('muted'));
});

$(".play-video").click( function (){
    $("video").prop('muted', !$("video").prop('muted'));
});
}
</script>
</p>

任何人和所有帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

您的代码实际上已经可以使用。但是,您在onclick属性中有一个未命名的函数语句,这可能会导致错误,具体取决于您的浏览器/环境(但是至少在Firefox中,它应该仍然起作用)。

$(document).ready(function(){
  $("video").prop('muted', true);

  $("video").click( function (){
      $(this).prop('muted', !$(this).prop('muted'));
  });

  $(".play-video").click( function (){
      $("video").prop('muted', !$("video").prop('muted'));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <video autoplay="" loop="" muted="" playsinline="" preload="Metadata" style=" padding-top:15%; width:100%;  height:auto;">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4">
  </video>
</p>