'Angular HTML Fullscreen Video Autoplay Not Working

Can anyone explain why this autoplay video is not working in chrome?

The video is stored in firebase storage. It plays when you visit a page and then go back to home page, but not when you first enter the page on refresh. It is an angular 6 application as well.

  <video autoplay muted loop>
    <source type="video/mp4" src="https://firebasestorage.googleapis.com/v0/b/gortonluxury.appspot.com/o/videos%2Fhero-video.mp4?alt=media&token=1231bda8-4240-4c1d-a0b9-9c5b50b320d0">
  </video>

Solution 1:^[1]

For a pure Angular solution, we would need to use Angular events and a template variable ( using the accepted answer) :

   <video #video 
      (canplay)="video.play()"
      (loadedmetadata)="video.muted = true"
  ...// as before
  >

Solution 2:^[2]

You can globally override video[autoplay] tag like a 'pure angular' solution

@Directive({
    selector: 'video[autoplay]',
    host: {
        'autoplay': '',
        'oncanplay': 'this.play()',
        'onloadedmetadata': 'this.muted = true'
    }
})
export class VideoAutoplayDirective {}

Solution 3:^[3]

The following was enough in my case, to have Angular 10 autoplay video like a GIF:

<video
  src="...mp4"
  type="video/mp4"
  playsinline
  loop
  autoplay
  [muted]="true"
></video>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	user3567240
Solution 3	Tom Roggero

'Angular HTML Fullscreen Video Autoplay Not Working

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]