javascript - 视频元素静音在 Chrome 中返回 false，即使属性设置为 "muted"

Question

我们有一个带有 autoplay 的 html 元素, muted和 loop声明的属性。我们注意到，由于新的 Chrome 66 autoplay policy，视频被阻止自动播放。 .记录 video.muted 返回 false在 Chrome 开发工具中，但是 true在 Safari 中 - 即使明确设置了该属性，Chrome 是否有任何理由将视频视为未静音？

编辑:添加视频标签标记:
<video preload="true" autoplay muted loop width="100" height="100" id="hero-video" class="fullscreen-video" aria-label="This is a background video showing example consumers.">
<source src="./assets/videos/myvideo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>


我们也在构建中使用 Vue 和 Webpack。

Answer 1

遇到了同样的问题。也使用 Vue，但我相信这可能适用于其他情况。在我的例子中， bool 属性 autoplay和 muted都设置在 <video> 上元素标签，但 videoEl.muted仍然等于 false .这可能是新的“非静音视频不自动播放”政策中的错误。

我设法通过删除 autoplay 来修复它和 muted属性，然后手动触发它们:

const videoEl = document.querySelector('video')
videoEl.muted = true
videoEl.play()

(vanilla js 示例，但在 Vue 中，您将它放在 mounted() 生命周期 Hook 中，并通过 <video> 引用您的 this.$refs 标签)