取消静音视频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 代码，特别是静音属性拼写错误。对于这种类型的属性，无需指定任何值，有两种方法可以将其写出：

1-

<video muted></video>

阿拉伯数字-

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

但永远不要写静音=">

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