Question

我们有一个声明了autoplay，muted和loop属性的html元素。我们注意到由于新的Chrome 66 autoplay policy，视频因自动播放而被阻止。记录video.muted会在Chrome开发者工具中返回false，但在Safari中会true - 是否有任何理由认为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，但我认为这可能适用于其他情况。就我而言，布尔属性autoplay和muted都在<video>元素标记上设置，但是videoEl.muted仍然等于false。这可能是新的“对非静音视频不自动播放”政策中的错误。

我设法通过同时删除autoplay和muted属性，然后手动触发它们来解决此问题：

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

（香草js示例，但在Vue中，您将其放在了mounted()生命周期挂钩中，并通过<video>引用了this.$refs标签）

Answer 2

我们在Vue中遇到了类似的问题。静音属性在Chrome和Firefox中似乎返回false，但在Safari中为true。我们发现了一个潜在的解决方案是将Muted属性绑定到Vue。这似乎使静音值在页面加载后保持为真。

v-bind:muted="true"

视频元素静音在Chrome中返回false，即使属性设置为＆＃34;静音＆＃34;

2 个答案: