WebView Not Respecting video tag "playsinline" attribute

[homerlex]

Bug Report

Problem

What is expected to happen?

When a video tag contains the playsinline attribute I expect the video to be played in the confines of the webview

What does actually happen?

The video is being rendered in a native full screen viewer.

Information

Command or Code

Create a Cordova app that has the following video tag in the webview:

<video id="video-player" autoplay playsinline controls src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"/>

When you start the cordova app you will see the video played full screen.

The same tag served to a Safari Browser behaves properly and doesn't render it full screen.

Environment, Platform, Device

Running on iPad (MLMP2LL/A) with iOS 15.0

Version information

Cordova ios platform: 6.2.0

Checklist

• [x] I searched for existing GitHub issues
• [x] I updated all Cordova tooling to most recent version
• [x ] I included all the necessary information above

[breautek]

It appears for playsinline to work, we need to enable allowsInlineMediaPlayback

https://github.com/apache/cordova-ios/blob/715c2dbfb273fb33721e8cf3f989ce7b20892d32/CordovaLib/Classes/Private/Plugins/CDVWebViewEngine/CDVWebViewEngine.m#L80

Looks like we do set this property but it's disabled by default, but can be enabled via the AllowInlineMediaPlayback preference.

Try adding <preference name="AllowInlineMediaPlayback" value="true" /> in your config.xml.

[homerlex]

@breautek - Perfect! That did the trick. Thanks so much for the quick response.

[trocker]

Building the ios app after adding this keeps on unsetting the value (removing the line). Do you know why that might be happening?

[Mizan-Rifat]

I have same issue. I've added in my config.xml. it’still not working. Any way to solve this issue???

[trocker]

I have same issue. I've added in my config.xml. it’still not working. Any way to solve this issue???

For me, the code magically started to work on it's own. Currently I have the following line under "" <preference name="AllowInlineMediaPlayback" value="true" />

Before this config started to work by itself, I remember doing the following as a stop-gap:

1. Search for other instances with the following command - grep -nir AllowInlineMediaPlayback *
2. platforms/ios/cordova/defaults.xml:25:    <preference name="AllowInlineMediaPlayback" value="false" />

Change the file in step 2 to say true instead of false. You might need to do this every time you add ios platform.