javascript - 如果删除 html 元素视频上的静音属性，则没有视频声音

Question

我使用 HTML video 元素。作为source，我使用了一个.mp4 有声视频。在我的 video 元素上有一些属性。默认我使用属性 muted 所以没有声音。使用一些 JavaScript，我通过单击按钮添加或删除属性 muted。所以这是有效的，当我检查我的标记并单击按钮时，我可以看到属性 muted 将如何添加或删除(查看下面的代码段)。

我的问题是，移除它时没有声音。如果我在笔记本电脑上的视频播放器中启动视频文件或直接在浏览器中打开它，我可以听到声音。由于帖子很多，应该可以使用此解决方案切换声音。我不知道为什么只有当我在我的 video 元素中使用它并添加/删除属性 muted 时它才没有声音。有什么想法吗？

const $ctx = $('.video');
const $video = $ctx.find('.video__video');
const $toggleSound = $ctx.find('.video__toggle-sound');

$toggleSound.click(this.handleVideoSound.bind(this));

function handleVideoSound() {
  const attr = $video.attr('muted');

  if (typeof attr !== typeof undefined && attr !== false) {
    $video.removeAttr('muted');
  } else {
    $video.attr('muted', '');
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video">
  <video class="video__video" autoplay loop muted playsinline poster="/assets/img/video-poster.png">
    <source src="/assets/video/video.mp4" type="video/mp4">
  </video>
  <button class="video__toggle-sound">Toggle video sound</button>
</div>

Answer 1

用下面的代码替换你的handleVideoSound方法

function handleVideoSound() {
   const attr = $video.prop("muted");
   $video.prop("muted", !attr);
}

希望对您有所帮助。下面是工作代码片段。

const $ctx = $(".video");
const $video = $ctx.find(".video__video");
const $toggleSound = $ctx.find(".video__toggle-sound");
$toggleSound.click(this.handleVideoSound.bind(this));

function handleVideoSound() {
    const attr = $video.prop("muted");
    $video.prop("muted", !attr);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video">
<video class="video__video" autoplay loop muted playsinline poster="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", type="video/mp4" />
</video>
<button class="video__toggle-sound">Toggle video sound</button>
</div>