What does not work: If I put a video tag with 'autoplay' (see below) into the template of an Angular 2+ component with the goal of autoplaying on mobile:
Solution 1:
I was searching for this issue a lot and I put the muted attribute like this:
[muted]="true" rather than just muted
and now it works
<video [muted]="true" autoplay>
<source src="path/to/video.mp4" type ="video/mp4" />
</video>
Copy Chrome has a policy to not let videos autoplay if the user has not first interacted with the page however if its a muted video chrome allows it. The problem here is that for some reason muted value goes as false when you just put muted in angular.
Solution 2:
I needed to use both onloadedmetadata and oncanplay to fix in angular 6
<video id ="bg-video" loop muted autoplay oncanplay="this.play()" onloadedmetadata="this.muted = true" >
<source src="video.mp4" type ="video/mp4" >
</video>
Copy Solution 3:
Similar issue with Angular 6 and Chrome 70.
In fact, the muted attribute in the HTML seems to be ignored by Chrome when the video is added by Angular. The resulting DOM element has a 'muted' property set to 'false'. Not sure if it is an Angular or a Chrome bug.
You need to set it manually to true to make the autoplay work.
I ended up with a directive :
@Directive ({selector : '[my-autoplay]' })
export class AutoplayVideoDirective implements OnInit {
constructor (public element: ElementRefpublic ngOnInit (): void {
let vid = this .element .nativeElement ;
vid.muted = true ;
vid.play ();
}
}
Copy and the HTML :
<video loop muted autoplay my-autoplay>
Copy Solution 4:
Had a similar issue with Chrome 66 (OSX High Sierra) not autoplaying a muted video in a Mat Dialog being opened by its parent on init. Solved it by adding *ngIf="true" to the video element:
<video *ngIf ="true" autoplay muted onloadedmetadata ="this.muted = true" controls >
<source src ="myVid.mp4" type ="video/mp4" >
<p > Your browser does not support the video element.</p >
</video >
Copy Solution 5:
Answer and work-around to OP and to question in my own comment: Yes, appending a video tag as vanilla HTML to an already initialized Angular component works as expected (confirmed at least in Chrome & FF). Just happened to need this for my own project today. :)
So you can do something like this, or a pipe that returns the HTML for a given video URL (which is much better perf-wise, google "Angular Pipes").
<div *ngFor="let file of files" [innerHTML]="getVideoTag(file)" ></div>
// component
getVideoTag(file) {
return this.domSanitizer.bypassSecurityTrustHtml(
`<video width="1280" height="720" autoplay muted controls>
<source src="${file.url} " type ="video/mp4" >No HTML5 supported.</source>
</video>`
);
}
Copy
Post a Comment for "Chrome (Android) Video Autoplay Inside Angular 2+ Component"