错误：当应用程序在 angular6 中首次加载时视频不会自动播放答案

【问题标题】：Error: Video not autoplay when app loads for the first time in angular6错误：当应用程序在 angular6 中首次加载时视频不会自动播放
【发布时间】：2018-10-25 18:34:27
【问题描述】：

我正在尝试在应用首次加载时自动播放视频。但是，当应用首次在浏览器上打开时，视频不会自动播放。

在这里，我得到了一个链接，但没有解决方案，仍然没有答案-Video is not playing in angular 4 but refresh page is working

视频有时已加载/有时未加载（在 Chrome 开发工具中检查时）。但是，在这两种情况下，视频都不是第一次播放。

这里是视频链接：https://stackblitz.com/edit/angular-nezdkr?file=src/app/app.component.html

当应用首次在 chrome 中加载但在 Mozilla firefox 中自动播放时，它不会自动播放。

注意：我不想显示控件。

app.component.html

<router-outlet></router-outlet>

app.routing.ts

 {
        path: '',
        redirectTo: 'videoCOmp',
        pathMatch: 'full'
    },
    {
        path: 'videoCOmp',
        component: videoCOmpComponent,
        pathMatch: 'full'
    }

当应用首次在浏览器上加载并路由到 videoCOMmpComponent 时，视频不会自动播放。但是，当重新加载/刷新浏览器时，视频会开始播放。

videoCOMpComponent.ts

    abc0 = true;
    def0 = true;

    abc1 = false;
    def1 = false;

videoPlay: HTMLElementVideoElement;

ngOniInit(){
// I am trying to solve this issue but getting no success:-

 if(this.abc0 && this.def0 ){
  this.videoPlay =  document.querySelector('videoContainer');
 this.videoPlay.play();
  }
}

videoCOMpComponent.html

<div id="video-container" class="video-container" *ngIf="abc0 && def0">
<video id="videoContainer" muted autoplay>
 <source src="../../../../assets/videos/meeting1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div *ngIf="abc1 && def1" class="video-container">
<video  muted autoplay="autoplay">
<source src="../../../../assets/videos/meeting2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>

【问题讨论】：

浏览器如 Chrome 使用
感谢 Alexander，但我尝试自动播放的视频没有声音。如何解决此问题。我想在应用加载后立即自动播放视频。
muted 属性必须位于 <video> 标记上。

标签： typescript google-chrome html5-video angular6

【解决方案1】：

我的问题得到了答案：-

  //autoplay muted onloadedmetadata="this.muted = true"  

<video id="abc" autoplay muted onloadedmetadata="this.muted = true" >
  <source src="https://github.com/mediaelement/mediaelement-files/blob/master/big_buck_bunny.mp4?raw=true" type="video/mp4">
  Your browser does not support the video tag.
</video>

【讨论】：

那么，你是如何解决这个问题的？使用@Alexander Staroselsky 评论的“静音”？

【解决方案2】：

对我来说，同样问题的解决方案是将 muted 属性更改为 [muted] = true。

（正如 Dilshan Liyanage 在Chrome (Android) video autoplay inside Angular 2+ component 上建议的那样）

【讨论】：

【解决方案3】：

在您的视频标签中使用它。由于 init 上的静音属性，功能崩溃

<video width="282" height="200" loop muted autoplay #video canplay)="video.play()" (loadedmetadata)="video.muted = true">
  <source src="path-to" type="video/webm">
</video>ode here

【讨论】：