I'm creating an app using Phonegap, and it has to have inline videos. When I put the code for inline videos, it works great on iPads, but it doesn't work on iPhones. On an iPhone, it just automatically fullscreens it. I've tried putting in a preference pane in the config.xml file, but it still doesn't work. Here's the code:
config.xml
<preference name="AllowInlineMediaPlayback" value="true" />
index.html
<video width="95%" style="display: block; margin: auto; margin-top: 10%;border: 1px inset #bbbbbb;" autoplay="" id="video" webkit-playsinline>
<source src="used_files/lesson2_1.mp4" type="video/mp4" id="video">
Your browser does not support the video tag.
</video>
I made a Hybrid app for IOS using Cordova and I got the same problem when playing video on iPhone. The video goes fullscreen with all the native control panel what I didn't want at all (breaking all my app design). On iPad it works fine, but not on iPhone. To solve the problem:
In the config.xml add
<preference name="AllowInlineMediaPlayback" value="true" />
In your JavaScript (a) OR in your HTML (b) (it depends of your code)
a) in your JavaScript
var video = document.getElementById("myVideo");// Get your video
video.setAttribute('webkit-playsinline', 'webkit-playsinline');// Fix fullscreen problem on IOS 8 and 9
video.setAttribute('playsinline', 'playsinline');// Fix fullscreen problem on IOS 10
b) in your HTML
<video id="myVideo" webkit-playsinline playsinline>
You can easily allow this by adding this to your config.xml:
<preference name="AllowInlineMediaPlayback" value="true" />
I finally figured out what was wrong. Since the config.xml only updates when you build your project, it does work, but not in the test view. I ran it as a native iPhone app, and it works in the iPhone app.
Related
I'm working on a mobile app using Phonegap/Cordova.
I built the ipa file using Phonegap Build and installed it on my iPhone.
I noticed when I scroll up or down at the edges of the view (like iOS bounce scrolling), the whole application view scrolls down (or up) and a gray background color appears.
I tried finding if there's a CSS code for that, but no luck.
I'm guessing maybe its something related to view-port.
Things to Consider:
- I'm using Framework7 v3
- PhoneGap Build cli-6.5.0
- iPhone 6S Plus
Screenshots of the issue:
What can be done to fix this bug?
Add the following to to your config.xml and then run cordova prepare:
<platform name="ios">
<preference name="DisallowOverscroll" value="true" />
<preference name="UIWebViewBounce" value="false" />
</platform>
Does anyone know if its possible to play inline video via A Frame in a Phonegap app?
I can get inline video working on my IPhone if the webpage is pinned to the home screen and I access the web page that way.
(How people are using it here: https://github.com/aframevr/aframe/issues/316)
When I try and run the page via phone gap, the video opens up in full screen.
I have pinned the server address to my homepage.
I don't know much about phone gap (its the first time i have used it) but have added :
<preference name="AllowInlineMediaPlayback" value="true" />
to the config.xml
thanks.
It turns out that you need to build the phonegap app. I added the preference:
<preference name="AllowInlineMediaPlayback" value="true" />
I cant seem to get it working with the emulator but on my iPhone 5 it works fine.
:)
I developed an app using Ionic and I need to hide the ios keyboard by clicking the button. I installed the plugin ionic keyboard:
cordova plugin add ionic-plugin-keyboard
I used this command and did not work:
cordova.plugins.Keyboard.close();
I am using this version of the Ionic with real device ios 8.
<link data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.13/css/ionic.css" />
<script data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.13/js/ionic.bundle.js"></script>
I added this to config.xml in addition to your command and it worked
<feature name="Keyboard">
<param name="ios-package" onload="true" value="IonicKeyboard" />
</feature>
In your app.js
Change this line
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
to
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
This will show the Accessory Bar of the keyboard with a "done" button on it.
You can close the keyboard more natively.
Hope it helps.
I can't make the splash screen stay until the page is loaded.
I have read every entry in the first, second and third page of google search. I read all the questions posted here on stackoverflow including A good explanation but none seem to work.
What's worse is that the behavior I'm seeing is all wrong. Following the instructions here I added alert at the deviceready event and I saw it happens after the white page is gone and my initial page is loaded.
I installed the plugin and included the following in the root level config.xml:
<feature name="SplashScreen">
<param name="ios-package" value="CDVSplashScreen" />
<param name="onload" value="true" />
</feature>
<preference name="AutoHideSplashScreen" value="false" />
I am still getting Splash->White screen->My initial page.
I am using Cordova 3.3.0 with ionicframework.
What am I doing wrong?
EDIT
I think it might have something to do with this error message:
The splashscreen image named Default-Portrait was not found
I have just had the same issue and found that Gopal's answer was not the solution (as I already had my files named and sized correctly).
Instead I found this answer to be correct: Cordova 3.4 iOS white screen after splash
Alternate solution in brief:Duplicate your "Default#2x~iphone.png" and rename it to "Default-Portrait#2x~iphone.png". Then drag that file into your Project Files in XCode under "Resources/Splash" so that it is recognised when Xcode builds.
If cordova-plugin-splashscreen can not find images, you can specify UILaunchImageFile key in plist.
<key>UILaunchImageFile</key>
<string>LaunchImage</string>
Gorpal said in a comment
Please make sure you are using right names and size of splash screen. Default-Portrait~ipad.png -- 768 x 1004 Default-Portrait#2x~ipad.png - 1536 x 2008 Default~iphone.png - 240x 320 Default#2x~iphone.png - 640x960 Default-568h#2x~iphone.png - 640x1136
which worked for me. It's all about the correct name.
For me I just added the key, Launch Image on the Info tab, similar to Nikita's answer:
I'm having a problem overriding Cordova's defaults when writing an app.
I'm writing an iOS app using the Cordova (formerly PhoneGap) framework and Xcode. Cordova lets me add a splash screen for the project by just dragging and dropping it in under the info tab for my project in Xcode. This part works fine, but there is a default loading-indicator gif running over the top of the splash image (I'm not sure whether it's from Xcode or from Cordova).
How can I remove the loading-indicator image?
You can remove the loading spinner in Cordova.plist. Set ShowSplashScreenSpinner to false.
Update:
In Cordova 3.0+ adding <preference name="ShowSplashScreenSpinner" value="false" /> to your config.xml will accomplish the same goal.
I just removed the Launch images source and set the launch screen file to mainviewcontroller
Go to General Setting -> at bottom side Launch images resource and launch screen setting is available
If you have an IOS device i have a working method that you can use, it solved my problem when compiling for IOS. (Firstly i want to say you need to add an icon and splash in the correct folders or else Cordova will their default ones for you and also make sure that they are large enough so that the resources can be generated accordingly):
Remove the SplashScreen plugin provided using
cordova plugin rm cordova-plugin-splashscreen
Place your icon in the resources/ios/ folder and name it
icon.png
Go to the route of your directory and add your splash image (make sure that splash.png is 2800px * 2800px)
splash.png
Remove the ios platform if you installed it already and then re add it
ionic cordova platform rm ios
ionic cordova platform add ios
5.Run the following command to generate your icon
ionic cordova resources ios --icon
if building for android
ionic cordova resources android --icon
6.Add the following lines to your config.xml
<preference name="SplashScreen" value="none" />
<preference name="SplashScreenDelay" value="0" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="FadeSplashScreen" value="false" />
<preference name="ShowSplashScreenSpinner" value="false" />
This should solve the default icon and remove the splash screen which Cordova adds to the IOS project by default. I hope it helps!