极客观点
项目管理
HarmonyOS
我知道有几篇文章有类似的问题，但我看过的文章都没有我遇到的具体问题。
问题是，我有一个不会自动播放的 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 检查器工具并再次关闭它，有时视频会开始播放。不过，并非总是如此。
我还尝试直接通过 JavaScript 触发 play() ，但这当然行不通，因为用户没有通过点击启动它。
这可能是 Chrome 的错误还是我的问题？任何帮助表示赞赏！
编辑：仍然无法正常工作。我尝试了以下方法，但没有结果：
- 使用
http://techslides.com/demos/sample-videos/small.mp4视频作为源。 - 添加
autoplay属性。 - 用建议的 jsfiddle 中的元素替换整个
<video>元素。
当我启用 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() {}
}
原文由 Simon K 发布，翻译遵循 CC BY-SA 4.0 许可协议
解决 Angular 2+ 中需要静默自动复制且不起作用的情况。
onloadedmetadata="this.muted = true"结论
在 Chrome 69 和 IE 11 中使用 angular 5.2 进行测试和运行。