我知道有几篇文章有类似的问题，但是我看过的所有文章都没有遇到我遇到的具体问题。
问题是，即使我的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>
此代码段来自website，并使用Angular构建。为了清楚起见，我在复制的代码段中删除了仅与Angular相关的属性。
我尝试了在线建议在各个地方进行的几种组合，并仔细阅读了影响自动播放功能的Chrome较新版本的文档。但是，我茫然无措，似乎什么也没用。
据推测，策略更改仅会影响带有音频的视频的自动播放，但似乎仍会阻止此静音视频的自动播放。
我注意到一个怪异的行为，就是有时候，如果我打开chrome inspector工具并再次将其关闭，就会开始播放视频。并非总是如此。
我还尝试了直接通过JavaScript触发play()的方法，但这当然是行不通的，因为用户没有通过单击来启动它。
这可能是Chrome的错误，还是我的错误？任何帮助表示赞赏！
编辑：仍然无法正常工作。我尝试了以下操作，但没有结果：
http://techslides.com/demos/sample-videos/small.mp4视频作为源。autoplay属性。<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;
}
}
TypeScript：
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() {}
}
答案 0 :(得分：6)
在需要自动复制的情况下，解决Angular 2+的问题变得无能为力。
经过数小时的搜索，我也发生了同样的事情。我发现了以下内容。 -[https://stackoverflow.com/a/50686550/10435550][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>
答案 1 :(得分：4)
使用Angular6。
我想要静音的自动播放。
以前没有一个对我有用，这个做了：
oncanplay="this.play()"
希望对您有所帮助。
答案 2 :(得分：3)
多亏了Bigless的链接this SO post，我解决了这个问题。
该链接中我对解决方案的实现如下：
HTML
<div class="video-chrome-fix" [innerHTML]="videoTag"></div>
TypeScript
import {Component} from '@angular/core';
import {DomSanitizer} from "@angular/platform-browser";
@Component({
selector: 'st-home',
templateUrl: './home-page.component.html',
styleUrls: ['./home-page.component.css']
})
export class HomePageComponent {
videoTag;
constructor(private sanitizer: DomSanitizer) {
this.videoTag = this.getVideoTag();
}
private getVideoTag() {
return this.sanitizer.bypassSecurityTrustHtml(
`<video class="landing-page-video noselect" muted loop autoplay playsinline disableRemotePlayback>
<source src="assets/images/landing-page-video-2.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>`
);
}
}
注意：我必须将类 landing-page-video 移至全局 styles.css 文件中，因为angular不会追加组件特定前缀（即，如果放置在特定于组件的css文件中，则不会应用样式）
答案 3 :(得分：2)
我需要同时使用onloadedmetadata和oncanplay来固定角度6。
<video loop muted autoplay oncanplay="this.play()" onloadedmetadata="this.muted = true">
<source src="video.mp4" type="video/mp4">
</video>
答案 4 :(得分：1)
这就是适用于Chrome 67（和Firefox 61）的功能。
<video width="320" height="240" muted controls autoplay>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
实时示例：jsfiddle
希望这会有所帮助。
答案 5 :(得分：1)
您必须在autoplay标记中使用<video>属性。
<video autoplay></video>
答案 6 :(得分：0)
我在使用Angle 6和Chrome 70时遇到了同样的问题，new autoplay policy在过去几个月中被Google更改了，我解决了在ngAfterViewInit（）中添加新方法的问题
<!-- home.component.html -->
<div class="fullscreen-bg">
<video #homeVideo id="homeVideo" class="fullscreen-bg__video" muted loop autoplay disableRemotePlayback onloadedmetadata="this.muted=true" *ngIf="true">
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
<source src="video.ogv" type="video/ogg">
</video>
</div>
// home.component.ts
ngAfterViewInit(){
let myVideo = document.getElementById('homeVideo') as HTMLFormElement;
myVideo.muted = false;
myVideo.loop = true;
if (myVideo){
setTimeout(() => {
console.log("Play ?", myVideo.play() );
myVideo.play();
}, 3000);
}
}
答案 7 :(得分：0)
代替使用HTML属性autoplay和muted。
您需要使用Angular属性[autoplay]="true"和[muted]="true"
答案 8 :(得分：0)
我不知道这是否有帮助，但有时静音属性不会完全使视频静音。我经常遇到的是它的音量是1而不是0，并且100％的音量并不意味着它已静音。因此，当我将音量设置为0时，它就起作用了。