12

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>
Vega
  • 27,856
  • 27
  • 95
  • 103
user10181542
  • 1,210
  • 3
  • 16
  • 37
  • Assuming your Chrome is up to date... I don't think it's a Chrome issue - copying that code into an otherwise empty HTML document and opening it in Chrome plays the video (_with some stuttering, not sure if that's a compression issue_)... making me think it's an issue on the Angular side of things. No errors or anything else in your console? To be sure it's an Angular thing, can you try sticking that code in the root `index.html` and make sure it plays that way, and then when you put it in a component it doesn't? – JeremyW Dec 13 '18 at 13:20
  • Possibly an Angular issue. I'll try that, good idea. Yes fully updated Chrome, it is inside of a component with video 100vh and 100vw. No console or any errors. I can navigate to another page then back to home and it plays flawlessly. Wondering if its a loading issue when the page first originally loads. – user10181542 Dec 13 '18 at 17:34
  • Interesting...putting it in root index.html folder made it run no problems on first page load. Definitely an angular component issue? Cannot see why though. – user10181542 Dec 13 '18 at 17:36
  • Any thoughts as to why it won't autoplay in angular component? – user10181542 Dec 13 '18 at 17:40

7 Answers7

61
<video loop muted autoplay oncanplay="this.play()" onloadedmetadata="this.muted = true">
    <source src="video.mp4" type="video/mp4">
</video>

Using onloadedmetadata & `oncanplay="this.play()"< are the javascript solutions to getting it to load on an Angular 6 project.

Vega
  • 27,856
  • 27
  • 95
  • 103
user10181542
  • 1,210
  • 3
  • 16
  • 37
10

For a pure Angular solution, we would need to use Angular events and a template variable:

<video #video 
    (canplay)="video.play()"
    (loadedmetadata)="video.muted = true"
    ...// as before
</video>
Vega
  • 27,856
  • 27
  • 95
  • 103
3

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 {}
user3567240
  • 31
  • 1
1

i spend hours on this problem and find the solution:

    <video [autoplay]="ture" [muted]="true" [loop]="true" src="{{src}}"></video>
shneurGreenberg
  • 11
  • 1
0

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>
Tom Roggero
  • 5,777
  • 1
  • 32
  • 39
0

Also please don't forget to check the autoplay policy for chrome:

https://developer.chrome.com/blog/autoplay/

KDSG
  • 145
  • 1
  • 6
0

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

Kumar Nedunchezhiyan
  • 1
  • 1
    As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 05 '23 at 12:16