使用Angular在Chrome 67中无法自动播放HTML5视频（即使处于静音状态）

Question

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

问题是，即使我的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>
<div class="noselect" *showItSizes="{max:899}" style="position: relative; top: 0; height: 100vh;">
    <img src="assets/images/landing_pic_mobile_3.jpg" alt="Student Talks in Space" class="landing-page-video"
         style="height: 100vh;">
    <img class="video-overlay-logo" src="assets/images/student-talks-header.png"/>
    <img src="assets/images/landing_pic_mobile_bottom.png" class="bottom-transition-glitch" alt="">
</div>


<div class="st-container">
    <st-events-list class="full-width event-list" *showItSizes="{max:899}"></st-events-list>
    <h1>HOW IT WORKS</h1>
    <st-what-is class="st-row"></st-what-is>
    <st-world-map class="full-width" *showItSizes="{min:899}"></st-world-map>
    <st-counters #counters class="full-width" stInView (cameInView)="counters.countUp()"></st-counters>
    <st-events-list class="full-width" *showItSizes="{min:900}"></st-events-list>
    <br><br>
    <st-video class="st-row"></st-video>
    <br><br>
    <st-partners></st-partners>
    <br><br>
</div>

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() {}
}

Answer 1

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

1. 在用户在屏幕上执行操作之前，将禁止自动播放。Chrome的自动播放政策将于2018年4月更改。 [ https://developers.google.com/web/updates/2017/09/autoplay-policy-changes]
2. 选择“静音”属性时，自动播放有效。
3. 对于这种情况，我们要使用属性“静音”并且它不起作用，问题出在Angular。

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

onloadedmetadata="this.muted = true"

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

结论

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

<video onloadedmetadata="this.muted=true" autoplay>
    <source src="myVideo.mp4" type="video/mp4" />
</video>

Answer 2

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

oncanplay="this.play()"

希望它能帮助到别人。

Answer 3

我需要同时使用两者onloadedmetadata并oncanplay修复角度 6

<video loop muted autoplay oncanplay="this.play()" onloadedmetadata="this.muted = true">
    <source src="video.mp4" type="video/mp4">
</video>

Answer 4

而不是使用 HTML 属性autoplay& muted。您需要使用 Angular 属性[autoplay]="true"&[muted]="true"