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

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

该代码段如下所示：

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

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

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

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

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

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

---

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

http://techslides.com/demos/sample-videos/small.mp4而是使用视频作为来源。

添加autoplay属性。

用建议的jsfiddle中的元素替换整个元素。

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

---

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

HTML：

    


    
    
    




    
    
HOW IT WORKS
    
    
    
    
    


    
    


    
    

CSS：

.landing-page-video, .landing-page-video-overlay {
  position: relative;
  width: 100vw;
  max-width:100%;
  top: 0;
  z-index: -100;
}

.landing-page-video-overlay {
  height: 56.25vw;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

@media screen and (max-width: 899px) {
  .video-overlay-logo {
    position: absolute;
    top: 50vh;
    right: 21%;
    width: 100vw;
    animation: fade-in 1s;
    z-index: 160;
  }

}

打字稿：

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'st-home',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {
  constructor() {}
  ngOnInit() {}
}

小智.. 10

对于需要自动重现的情况，Angular 2+的解决方案是无提示的且不起作用。

在用户在屏幕上执行操作之前，将禁止自动播放。Chrome的自动播放政策将于2018年4月更改。 [ https://developers.google.com/web/updates/2017/09/autoplay-policy-changes]

选择“静音”属性时，自动播放有效。

对于这种情况，我们要使用属性“静音”并且它不起作用，问题出在Angular。

经过数小时的搜索，我也发生了同样的事情。我发现了以下内容。-[ /sf/ask/17360801/] [2 ]

Onloadedmetadata="this.muted = true"

这是关键。Angular无法正确翻译服装“静音”。因此，您必须使用“ onloadedmetadata”。

结论

经过测试，并在Chrome 69和IE 11中使用angular 5.2运行。

非常感谢我爱你。对于其他人的记录，我需要同时使用这两个`Oncanplay=“ this.play（）” Onloadedmetadata=“ this.muted = true”` (3认同)

---

小智.. 6

使用Angular6。
我想要静音的自动播放。以前没有一个对我有用，这个做了：

Oncanplay="this.play()"

希望它能帮助到别人。

1> 小智..：

---

对于需要自动重现的情况，Angular 2+的解决方案是无提示的且不起作用。

在用户在屏幕上执行操作之前，将禁止自动播放。Chrome的自动播放政策将于2018年4月更改。 [ https://developers.google.com/web/updates/2017/09/autoplay-policy-changes]

选择“静音”属性时，自动播放有效。

对于这种情况，我们要使用属性“静音”并且它不起作用，问题出在Angular。

经过数小时的搜索，我也发生了同样的事情。我发现了以下内容。-[ /sf/ask/17360801/] [2 ]

Onloadedmetadata="this.muted = true"

这是关键。Angular无法正确翻译服装“静音”。因此，您必须使用“ onloadedmetadata”。

结论

经过测试，并在Chrome 69和IE 11中使用angular 5.2运行。

---

非常感谢我爱你。对于其他人的记录，我需要同时使用这两个`Oncanplay=“ this.play（）” Onloadedmetadata=“ this.muted = true”`

2> 小智..：

---

使用Angular6。
我想要静音的自动播放。以前没有一个对我有用，这个做了：

Oncanplay="this.play()"

希望它能帮助到别人。