Braian Mellor Braian Mellor - 6 months ago 134
iOS Question

Use video as a background in ionic/cordova for ios

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

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.