Play video as background in ios device
Application Type
Mobile

Hi all,

I am trying to play video in the mobile app as background. It works perfectly on Android device but not on iOS device. The video would play in full screen and the video controls would appear when paused.

Here is what I have try so far:

Set "allowsInlineMediaPlayback" to true in preferences.


Method 1: Use HTML element widget and set "playsinline" attribute


Method 2: Use video widget and append "playsinline" attribute with JavaScript


Thanks for helping ;)

Solution

Hi Palak,

How are you?

This issue is resolved. It turns out the preference stated in Cordova document and apple developer document is different. There is a missing "s" after "allow" for Cordova.


Apple: allowsInlineMediaPlayback

Reference: https://developer.apple.com/documentation/webkit/wkwebviewconfiguration/1614793-allowsinlinemediaplayback


Cordova: AllowInlineMediaPlayback

Reference: https://cordova.apache.org/docs/en/latest/config_ref/index.html


I put both of them in Extensibility Configurations and set to true. It works perfectly after generated a new version of app.


The file is about 150mb. Things I concern a bit is the usage of mobile data in case of device without Wifi.

For the second and third questions, I haven't try other ways but my back up plan is same as yours which is using GIFs. I would probably reference this post if I use GIFs.


Hope the information above is helpful :)

Dear Chi,
Greetings of the day

Are you facing the same issue still or its resolved ?
If its not resolved, can you please tell me that it is only option to use .mp4 file in your application?
Is that file will remain same or its dynamic ?
In addition to that is it really big video file ?


I am asking this because few months back when I had this issue, I simply converted a normal video file to HD gif and it worked for both devices very well without compromising quality by using it as background image.


I know its not the exact solution of your issue but suggesting a workaround which was saver for me.

Let us know your thoughts. 


Regards,
Palak Patel

Solution

Hi Palak,

How are you?

This issue is resolved. It turns out the preference stated in Cordova document and apple developer document is different. There is a missing "s" after "allow" for Cordova.


Apple: allowsInlineMediaPlayback

Reference: https://developer.apple.com/documentation/webkit/wkwebviewconfiguration/1614793-allowsinlinemediaplayback


Cordova: AllowInlineMediaPlayback

Reference: https://cordova.apache.org/docs/en/latest/config_ref/index.html


I put both of them in Extensibility Configurations and set to true. It works perfectly after generated a new version of app.


The file is about 150mb. Things I concern a bit is the usage of mobile data in case of device without Wifi.

For the second and third questions, I haven't try other ways but my back up plan is same as yours which is using GIFs. I would probably reference this post if I use GIFs.


Hope the information above is helpful :)

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.