Phonegap iOS HTML5 Video Opens Player

0
votes

I am using Phonegap with a very simple landing page:

<div>
    <video playsinline autoplay muted loop id='bgvid'>
        <source src='vid/localvid.mp4' type='video/mp4'>
    </video>
</div>

The intent is to have the video playing in the background with some content overlayed on top. The video does indeed start playing, but on iOS it launches the native full screen video player rather than playing it in the div itself.

Any idea how to keep it from launching the native video player?

Thanks!

2
ioshtmlcordovavideo

2 Answers

3
votes

Somewhere in config file you need to add this configuration to play inline

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

in iPhone it will always play in fullscreen, but in iPad and bigger devices it will play inside the parent div element.

Above config works on cordova-ionic project, I guess it is same the phonegap as well.

2
votes

It actually takes two things and it DOES work on the iPhone:

Add this to config.xml <preference name="AllowInlineMediaPlayback" value="true" />

And in the HTML you must include webkit-playsinline

<video webkit-playsinline playsinline autoplay muted loop><source src='vid/vid.mp4' type='video/mp4'></video>