iOS Video playsinline not always playing inline in cordova app

Question

Seems like there's a bug in safari web view that causes the video to not play inline under certain circumstances. Rebooting the device solved the issue.

Has anybody seen this before? Is there a way to fix? If not, is there a way to detect a video going full screen and abort it?

Gray

you want to prevent video going to fullscreen or something else? you missed the question part and what type of video it is (means is it YouTube, or Vimeo) – Byrdie

@JoeFlateau add this in your config.xml - <preference name="AllowInlineMediaPlayback" value="true" /> Also add this attribute in your HTML video tag - "webkit-playsinline playsinline" – Dolf

@JoeFlateau Any update on this? – Dolf

It's html5 video. Not youtube or vimeo. And that preference is already in the config.xml. Like I said, it USUALLY plays inline, but -- seemingly randomly -- plays fullscreen instead until I reboot the device and it's back to inline again. – Gray

@JoeFlateau Feel its more of a device issue then functional. Is it happening in all devices? – Dolf

Answer 1

I had the same issue, resolved by adding playsinline and webkit-playsinline to the web app's <video> tag:

<video src="foo.mp4" playsinline webkit-playsinline />

This is a fix introduced by Apple. For iOS 10+ devices, playsinline is sufficient. For iOS 8 and iOS 9, both tags are required. Devices below iOS8 do not support HTML5 videos.

From Safari documentation:

webkit-playsinline: Indicates that a video element should play inline instead of full-screen. Enabled only in a UIWebView with the allowsInlineMediaPlayback property set to YES.

Dripping

I already have both of those attributes on the video. 99% of the time the videos play inline, but that 1% of the time where the video pops up full screen is killing me – Gray

Do you have these attributes in the <video> element or are you adding them by JS or some other form? – Dripping

Both actually. There's a video that's instantiated through javascript and frames are drawn on a canvas that is in the document, and there are videos that should just play inline and are <video> elements in the document. – Gray

Does this happen on specific videos? Specific devices? – Dripping

That's the frustrating part. It happens on the same videos/devices that work most of the time. On my iPhone it plays 99% of the time properly inline, but -- seemingly -- randomly will just pop open full screen. – Gray

And when it does, the full screen mode is consistant? until reboot? – Dripping

Usually if I kill the app by swiping it away and relaunch it's fine, only a few times I had to reboot the device completely. – Gray

I'm starting to think it may be an artifact of the cordova hot code push plugin. Seems to happen when that plugin causes the refresh – Gray

Answer 2

Have the same issue exactly - video stopped playing inline at times - strangely I discovered this has to do with opening an in-app-browser window (using cordova.InAppBrowser.open) prior to playing videos...

see - webkit-playsinline stops working when returning to page in cordova iOS app

Inaccuracy

Answer 3

this is because your iPhone is in low power mode. If you disable low power mode playsInline works as expected.

I found no solution for this behaviour. Safari forces all video autoplays to stop

Cassius