Use video as a background in ionic/cordova for ios

Question

I\'m needing to play like 6 videos as background in differents divs at the same time, but in IOS and ANDROID platforms. I\'m developing an ionic app.

I\'ve found a solut

Answer 1

So for this issue as used 2 things.

First one, on config.xml added the next line

<preference name="AllowInlineMediaPlayback" value="true"/>

And after add the webkit-playsinline directive inside the video tag like this:

<video controls preload="auto" webkit-playsinline><source src="videos/video_file.mp4"></video>

And it works like a charm.

Answer 2

Please note that the above answer is correct, except for the fact that with recent iOS updates to the video tag, the video must also have the muted property set to true in order to allow autoplay without user gesture.

<video controls preload="auto" autoplay playsinline muted loop><source src="videos/video_file.mp4"></video>

I spent all of last night trying to figure this one out, and I hope that this helps someone else out there.