Error: Video not autoplay when app loads for the first time in angular6

0
votes

I am trying to autoplay the video when the app first load. But video is not autoplaying when app first open on browser.

Here, I got a link but no solution was there and still unanswered- Video is not playing in angular 4 but refresh page is working

The video is sometimes loaded/ sometimes not (when checked in Chrome Dev Tool). However, video is not playing in either case for the first time.

Here is the video link: https://stackblitz.com/edit/angular-nezdkr?file=src/app/app.component.html

It does not autoplaying when app first loading in chrome but autoplaying in Mozilla firefox.

Note: I don't want to show controls.

app.component.html

<router-outlet></router-outlet>

app.routing.ts

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

When app first loads on browser and it route to videoCOmpComponent, video is not autoplaying. However, when browser is reloaded/ refreshed, the video starts playing.

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>
3
typescriptgoogle-chromehtml5-videoangular6
Browsers like Chrome autoplay of videos with sound using the <video> tag is disabled. Videos with unmuted sound requires user interaction to activate unless specific requirements for specific browsers are met. This was done because autoplayed videos result in negative experiences such as unwanted increased data consumption. Either have the video muted or have the user interact with the <video> element. - Alexander Staroselsky
Thanks Alexander, but the video I am trying to autoplay having no sound.How to solve this issue. I want to autoplay video as soon as app loaded. - MαHi
The muted property needs to be on the <video> tag. - Alexander Staroselsky

3 Answers

1
votes

For me, the solution for the same problem was to change the muted attribute to [muted] = true.

(as Dilshan Liyanage suggested on Chrome (Android) video autoplay inside Angular 2+ component)

0
votes

I got answer to my problem:-

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

User this in your video tags. Feature crashes because of mute property on 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