Playing video inline in Ionic/Phonegap (webkit-playsinline not working)

Question

I'm using the HTML5 video tag to get a video playing in my ionic app. Here's my code:

<video autoplay loop class="video" webkit-playsinline>
    <source src="videos/polina.mp4" type='video/mp4; codecs="h.264"' >
    <source src="videos/polina.webm" type="video/webm">
</video>

The video autoplays fine, however the video opens up into the native player and doesn't play inline. After some research I came to understand that webkit-playsinline should solve this issue, at least on iOS, but this doesn't seem to be the case for me testing on iOS8&9.

I tried videogular and I'm still getting the blasted native player appearing.

I even paid a little bit to get this code here: https://creativemarket.com/DenzilDoyle/194974-Ionic-background-video that illustrates exactly what I am trying to create (a background video on my login screen) but still the video opens up into the native player.

Has anyone managed to get a video to play inline on their ionic/phonegap app? If so how?

Answer 1

The reason why is the UIWebView was not configured to allow inline video playback. On iPads it is defaulted to allow it, but on iPhones it is not.

You can easily allow this by adding this to your config.xml:

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

The UIWebView should then respect the webkit-playsinline attribute.

Also the code will work on most Android devices as well (especially if you add the Crosswalk plugin). However you should put the webm first, then the mp4 file to avoid problems with some versions of Chrome).

You should also add a poster="firstFrame.jpg" to the video tag so that you get an image while the video gets ready to play. The jpg should be the first frame of the video (use whatever video editor you like to extract it).

See this site for a much more complete example (and free...). I have used this on Android / iOS with Cordova with minimal changes. The changes needed were load the files into the project, use CrossWalk for Android, remove the media selector in the css (it stops video on small screens by design, but it works ok in Cordova), add the playsinline attribute, and finally add in the preference in the config.xml.

http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video