Geek Answers Handbook

Use video as background in ionic / cordova for ios

I need to play as 6 videos as background in different divs at the same time, but on IOS and ANDROID platforms. I am developing an ionic application.

I found a solution that works fine with the network, but when I built it, it worked the way I thought: every video that I used as a background, just play like a full screen.

Here is the 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.

+3
source share
2 answers

So, 2 things are used for this problem.

First, the following line is added to config.xml

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

And after adding the webkit-playinginline 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.

+10
source

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

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

I spent all last night trying to figure it out, and hope this helps someone else.

+3
source

More articles:


All Articles