CODEWITHSUNDEEP
htmlangular
Razvan Serbaneci
Razvan Serbaneci

Reputation: 11

Angular 9 & HTML5 Background video does not autoplay on iOS 13 ( No matter the browser )

EDIT :

I tested on 12.4.6 Version of iOS, and it plays with no problem. On my main phone however : iOS 13.3.1 , It still got this problem described here .

I'm kinda new to Angular, and I'm developing an website for a friend, also it helps me to learn. I ran into this problem. I set a video as a main background and it works fine on computer browsers and Android browsers ( Chrome only tested on android ):

Here's the HTML Code : 

<div class="video_box">
  <div class="video_overlay"></div>
  <video #videoElement [loop]="true" [muted]="true" [volume]="0.2" [autoplay]="true" playsinline id="bgVideo">
    <source src="assets/bgVideo.mp4" type="video/mp4"/>
  </video>
</div>

Here's the CSS Code : 

.video_box {
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.video_box video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 53.5%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.video_box .video_overlay {
  top: 0;
  position: absolute;
  height: 100%;
  z-index:1;
  width: 100%;
  background: #000000;
  opacity: 0.5;
}

It loads fine and most importantly autoplays on Desktop / Android. But on iOS devices when I serve my application and connect to it ( no matter the browser ), it doesn't play, only after user interaction. ( If I click my own Mute or Play buttons )

And by my knowledge it already respects the rules of Safari or Chrome with being muted. ( The volume tag, does not affect it even if I remove it ) .

I tried lifecycle hooks such as ngOnInit or ngAfterViewInit but same story applies .

I ran out of ideas . Thanks in advance .

Upvotes: 0

Views: 2164

Answers (1)

Razvan Serbaneci
Razvan Serbaneci

Reputation: 11

I found it. Yes I am also stupid and don't know iOS that better

The thing is, when you have Low Power mode Enabled, the video autoplay in the phone settings is turned OFF and you can't modify that only if you get out of Low Power mode.

I turned that off, and it works as intended.

Thanks. I'll leave this here, maybe others run into it.

Upvotes: 1

Related Questions