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

您需要将代码附加在playing event上：

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

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 =“”

尝试改变我所说的内容，希望对您有所帮助。：）

取消静音视频JS脚本在控制台中工作，但无法在页面中工作

2 个答案: