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

您需要将代码附加到 playing event :

The playing event is fired when playback is ready to start after having been paused or delayed due to lack of data.

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>