Ошибка: видео не воспроизводится автоматически, когда приложение загружается впервые в angular6

Question

Я пытаюсь автоматически воспроизвести видео при первой загрузке приложения.Но видео не воспроизводится автоматически при первом открытии приложения в браузере.

Здесь я получил ссылку, но никакого решения не было и все еще остается без ответа - Видео не воспроизводится в angular 4, но страница обновления работает

Видео иногда загружается / иногда нет (если отмечено в Chrome Dev Tool).Однако видео не воспроизводится ни в одном из случаев в первый раз.

Вот ссылка на видео: 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

Я получил ответ на мою проблему: -

  //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>