错误：应用首次在angular6中加载时，视频无法自动播放

Question

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

在这里，我有一个链接，但是那里没有解决方案，但仍然没有答案-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'
    }

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

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>

Answer 1

我得到了我的问题的答案：-

 savePhoto() {
    this.screen.URI(100).then(
      res => {
        this.base64ToGallery.base64ToGallery(res.URI, { prefix: '_bilar', mediaScanner: true }).then(
          res => {
            alert('Saved image to gallery ' + res);
            this.base64value = res.URI;
          },
          err => alert('Error saving image to gallery ' + err)
        );
      }
    )
  }

Answer 2

在您的视频标签中使用此功能。功能由于初始化上的静音属性而崩溃

<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

Answer 3

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

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