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

Posted 2023-02-25

【中文标题】尝试使用 onclick 在 html 视频上切换声音

【英文标题】：trying to toggle sound on html video with onclick

【发布时间】：2019-04-11 16:16:42

【问题描述】：

我正在尝试使用 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】：

您的代码实际上已经有效。但是，您在 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>