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.
:)
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>
I'm submitting cordova build to android and ios.. unfortunately on ios, navbar falls down in every menu.
White space on top
Navbar pushed down and not sticking to top when scrolling
I'm using node.js v8.11.2, cordova 8.0.0, 9.0 ios deployment target and i've tried in every iphone, navbar keeps falls down.
<preference name="StatusBarOverlaysWebView" value="false"/>
<preference name="StatusBarBackgroundColor" value="#000000"/>
<preference name="StatusBarStyle" value="lightcontent"/>
I also read some post about IOS status bar problem and tried to add some code above to config.xml and still not working as expected.
Isn’t it because on top of iOS displays are system info data (time, Wi-Fi etc.). So app is basically pushed down, so best way for me was specify “StatusBarBackgroundColor” to correspond with your navbar.
Steve
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.
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 have made an iOS application using PhoneGap Build, Which works fine. I am having some kind of problem while scrolling a page. When I scroll from bottom or from Top whole screen moves. Is there any way to prevent this,as I know this is iOS feature. Which is very nice but in case of my application I do not want this. So help me out.
Use this in you config file:
<preference name="DisallowOverscroll" value="true" />
<preference name="webviewbounce" value="false" />