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 solution that works perfectly with web, but when I builded it up, it worked as I supposed: every video that I used as background just play as full screen.

Here goes some code:

.bg-vid {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: 100%;;
	z-index: -100;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	background: url(http://www.w3schools.com/tags/movie.mp4) no-repeat;
	background-size: cover;
}

	  <div>
	  	<video autoplay muted loop class="bg-vid">
	    	<source src="http://www.w3schools.com/tags/movie.mp4" type="video/webm">
	    	<source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
	    </video>
	  </div>

Hope someone can help me.

Answer 1

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.

Answer 2

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.