javascript - 取消静音视频JS脚本在控制台中工作但不是页面

Question

我在网站上有以下视频

   <video class="c-banner-video__media" muted="" autoplay="" playsinline="" loop="" poster="https://foredigital.co.uk/wp-content/uploads/2018/07/BANNER-1-FIRST-FRAME.png">
      <source src="https://player.vimeo.com/external/278635957.hd.mp4?s=20b86d3926f13e5fbfe3cade6c0f4f74c5454d54&amp;profile_id=175" type="video/mp4" media="all and (min-width: 1280px)">
      <source src="https://player.vimeo.com/external/278635957.hd.mp4?s=20b86d3926f13e5fbfe3cade6c0f4f74c5454d54&amp;profile_id=174" type="video/mp4" media="all and (min-width: 960px)">
      <source src="https://player.vimeo.com/external/278635957.sd.mp4?s=2b9adcfe5fecdfe3b2d1f79e966b74cb36d628f3&amp;profile_id=165" type="video/mp4" media="all and (min-width: 640px)">
      <source src="https://player.vimeo.com/external/278635957.sd.mp4?s=2b9adcfe5fecdfe3b2d1f79e966b74cb36d628f3&amp;profile_id=164" type="video/mp4">
   </video>

以下 JS 在控制台中有效，但在本地副本或实时站点中无效

  <script>

     var video = document.querySelector(".c-banner-video__media");

     video.muted = false;

  </script>

我很困惑为什么会这样，是否需要将其包装在 document.ready 函数中？

目前它只是完全停止视频的自动播放，没有任何反应。

Answer 1

您需要在播放事件上附加代码：

当由于缺少数据而暂停或延迟后准备开始播放时，将触发播放事件。

document.querySelector(".c-banner-video__media").addEventListener('playing', function(e) {
    this.muted = false;
})

<video class="c-banner-video__media" muted="" autoplay="" playsinline="" loop="" poster="https://foredigital.co.uk/wp-content/uploads/2018/07/BANNER-1-FIRST-FRAME.png">
    <source src="https://player.vimeo.com/external/278635957.hd.mp4?s=20b86d3926f13e5fbfe3cade6c0f4f74c5454d54&amp;profile_id=175" type="video/mp4" media="all and (min-width: 1280px)">
    <source src="https://player.vimeo.com/external/278635957.hd.mp4?s=20b86d3926f13e5fbfe3cade6c0f4f74c5454d54&amp;profile_id=174" type="video/mp4" media="all and (min-width: 960px)">
    <source src="https://player.vimeo.com/external/278635957.sd.mp4?s=2b9adcfe5fecdfe3b2d1f79e966b74cb36d628f3&amp;profile_id=165" type="video/mp4" media="all and (min-width: 640px)">
    <source src="https://player.vimeo.com/external/278635957.sd.mp4?s=2b9adcfe5fecdfe3b2d1f79e966b74cb36d628f3&amp;profile_id=164" type="video/mp4">
</video>

Answer 2

HTML 代码，特别是muted属性拼写错误。对于这种不需要指定任何值的属性，有两种写出方法：

1-

<video muted></video>

2-

<video muted="muted"></video>

但永远不要写muted=""

试着用我所说的来改变，我希望它会有所帮助。:)