小编Dan*_*aan的帖子

我知道有几篇文章有类似的问题，但是我看过的所有文章都没有遇到我遇到的特定问题。

问题是，即使我的HTML5视频已被静音，它也无法自动播放。具体来说，它不适用于Chrome。它在Safari和Firefox中完全可以正常工作。

该代码段如下所示：

<video class="landing-page-video" poster="assets/images/video-poster.jpg" loop muted playsinline preload="metadata" disableRemotePlayback>
    <source src="assets/images/landing-page-video-2.mp4" type="video/mp4">
    Your browser does not support video.
</video>

该代码段来自此网站，并且是使用Angular构建的。为了清楚起见，我在复制的片段中删除了仅与Angular相关的属性。

我已经尝试过在线推荐各个地点的几种组合，并仔细阅读了影响自动播放功能的Chrome较新版本的文档。但是，我茫然无措，似乎什么也没用。

据推测，策略更改仅会影响带有音频的视频的自动播放，但似乎仍会阻止此静音视频的自动播放。

我注意到一种奇怪的行为，就是有时候，如果我打开chrome inspector工具并再次将其关闭，就会开始播放视频。并非总是如此。

我也尝试过play()直接通过JavaScript 触发直接调用，但是由于用户没有通过单击来启动它，因此这当然是行不通的。

这可能是Chrome的错误，还是我的错误？任何帮助表示赞赏！

编辑：仍然无法正常工作。我尝试了以下操作，但没有结果：

• http://techslides.com/demos/sample-videos/small.mp4而是使用视频作为来源。
• 添加autoplay属性。
• <video>用建议的jsfiddle中的元素替换整个元素。

启用时controls，音频按钮显示为“打开”版本，显示为灰色，这可能是由于我的视频没有音轨。但是，在使用演示视频时，尽管设置了muted属性，它仍会显示带有“打开声音”的音频按钮。

编辑2：为包含视频元素的Angular组件添加了代码：

HTML：

<video class="landing-page-video noselect"  poster="assets/images/video-poster.jpg" *showItSizes="{min:900}" muted loop autoplay disableRemotePlayback>
    <source src="assets/images/landing-page-video-2.mp4" type="video/mp4">
    Your browser does not support video.
</video>

<div class="landing-page-video-overlay noselect" *showItSizes="{min:900}" [ngStyle]="{'height': videoHeight + 'px'}">
    <st-svg-logo class="video-overlay-logo"></st-svg-logo>
</div> …