How to embed Youtube video in Cordova Android app - android

I am new to Cordova App development.
I have a Youtube URL and I want to embed the video in Cordova app. I have tried making it with YouTube Api(JS Library) and with iframe also. What do I have to do to make the video load on the Android app?

For me, the solution was editing config.xml file adding the following lines:
<preference name="AllowInlineMediaPlayback" value="true" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />
<allow-navigation href="*youtube*" />
<allow-navigation href="*ytimg*" />
<allow-navigation href="*youtube-nocookie*" />

Using iframe is the preferred and suggested way to embed youtube videos, so this is how you need to proceed. The getting started code from the YoutTube iframe API reference loads and works in both iOS (tested on iOS 7) and Android (tested on Android 4.3).

Adding the parameter feature=player_embedded to the iframe url worked fine for me:
<iframe width="640" height="360" src="http://www.youtube.com/embed/*********?feature=player_embedded" frameborder="0" allowfullscreen></iframe>

Unless you are using <access origin="*" /> (not recommended) you will need to allow the following domains with your config.xml to embed youtube videos in an cordova android app:
<access origin="https://*.youtube-nocookie.com" />
<access origin="https://*.youtube.com" />
<access origin="https://*.ytimg.com" />
<access origin="https://*.gstatic.com" />
<access origin="https://*.googlevideo.com" />
<access origin="https://*.google.com" />
This is for use with the privacy-enhanced embed mode. The youtube-nocookie domain presumably is not needed for a standard embed.
If you use a content security meta tag you will also need to allow those domains in your csp.

Related

cordova-plugin-ionic-webview - custom scheme not working on Android

I am developing (and near to the release) of a Cordova App for iOS and Android.
I am trying to use cordova-plugin-ionic-webview in order to use the latest WebView engines.
I am able to use this plugin on iOS but on Android the App crashes on launch.
MY CONFIG.XML:
<allow-navigation href="cordovaios://*" />
<allow-navigation href="cordovaandroid://*" />
<plugin name="cordova-plugin-ionic-webview" spec="^4.0.0">
<variable name="ANDROID_SUPPORT_ANNOTATIONS_VERSION" value="27.+" />
</plugin>
<preference name="Hostname" value="my-backend-url-to-avoid-CORS.com" />
<preference name="iosScheme" value="cordovaios" />
<preference name="Scheme" value="cordovaandroid" />
<preference name="ScrollEnabled" value="true" />
<preference name="MixedContentMode" value="0" />
<preference name="AllowBackForwardNavigationGestures" value="true" />
<preference name="Allow3DTouchLinkPreview" value="false" />
<preference name="WKSuspendInBackground" value="false" />
<preference name="KeyboardAppearanceDark" value="false" />
LOGS:
5726-5770/mycertificate.enterprise D/SERVER: Handling local request: cordovaandroid://my-backend-url-to-avoid-CORS.com/static/js/10.601e7973.chunk.js
5726-5773/mycertificate.enterprise E/chromium: [ERROR:render_process_host_impl.cc(4070)] Terminating render process for bad Mojo message: Received bad user message: Origin is invalid
5726-5773/mycertificate.enterprise E/chromium: [ERROR:bad_message.cc(23)] Terminating renderer for bad IPC message, reason 123
NOTE:
This config works fine on iOS. On Android I can't use this plugin due to this Hostname/Origin issue.
That custom scheme does not appear to be supported (just try to find something alike that in the source code). It is also beyond my understanding, for what one even would even need to register a custom protocol handler, while never leaving that WebView? The usual purpose is: to open another application.
<preference name="Scheme" value="https" />
<allow-navigation href="https://my-backend-url-to-avoid-CORS.com/*"/>
Unfortunately there is a lot of mismatching between the Cordova Android Platform version and plugins versions, which lead to some waste of time for nothing. Said so, for similar problemas I had like this I simply fixed them downgrading the version of Cordova or Android or the Plugin (or use the same version of android the plugin is using in their code example).

Phonegap Developer App and Phonegap Build have different behavior

I`m developing mobile app using phonegap build for android and iOS platforms. iOS version looks fine and identically both on build version and Phonegap Developer App. Also Phonegap Developer App works in the same way for Android.
But when I install phonegap build's apk-file to Android, some html-layout for specific div gets wrong scale, as if I wrote another width in css for this div. But the rest part of my application looks ok.
The most confusing thing for me in this situation is different appearance of Phonegap Build app and phonegap develop app. I tried to remove all plugins from config.xml to check if they influence somehow to app's behavior, but the result was the same. So my question is: why there may be distinctions in behavior of build and developer versions?
<?xml version='1.0' encoding='utf-8'?>
<widget id="myapp" ios-CFBundleIdentifier="myapp" version="1.0.3" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>Test App</name>
<description>
Hello World sample application that responds to the deviceready event.
</description>
<author email="support#phonegap.com" href="http://phonegap.com">
PhoneGap Team
</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />
<preference name="fullscreen" value="false" />
<preference name="Orientation" value="portrait" />
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="16" />
<edit-config file="AndroidManifest.xml" mode="overwrite" target="/manifest/application/activity[#android:name='MainActivity']">
<activity gap:configChanges="orientation|keyboardHidden" gap:windowSoftInputMode="adjustPan" />
</edit-config>
<branch-config>
<branch-key value="some_key" />
<uri-scheme value="some_value" />
<link-domain value="some_domain" />
<ios-team-release value="some_value" />
</branch-config>
</widget>
It looks ok
It looks wrong (the circle)
If you did not use responsive design, you will need to reduce the size of the image, as this happens on every different device.
If the problem is with the HTML content size, it sounds as a viewport issue. All manufacturers tend to alter the Android webview engine, so to ensure your app looks the same on most devices you must add this meta-tag to the head section of your index.html file:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
This means that:
User cannot zoom inside your app
The initial zoom is 100% (means no zoom)
The viewport width (page horizontal size) is the same as the device width
The viewport height is the same as the device height
To prevent issues like this, you should create your app with the sample index.html generated by Cordova when you create a new app using the command line interface. This creates an app with an index.html and CSS file with the proper structure to ensure it will look (mostly) identical on every device.

PhoneGap - inappbrowser not working - Need to open the URL inside the app

There are so many questions related to this like, Phonegap - How to open external link inside the app .
I want to open the website URL inside the app (not asking which browser need to open) when open the app.
But it asked which browser you need to open.... What I have done mistake here? (This is working fine on emulator, but when I install it to android phone it asked which browser......)
My config file
<access origin="*" />
<plugin name="cordova-plugin-whitelist" spec="~1.3.2" />
<plugin name="cordova-plugin-inappbrowser" spec="~1.7.2" />
Index File
<script>
window.open('http://example.com', '_self', 'location=no,hidden=yes,closebuttoncaption=Done,toolbar=no');
</script>
You have to configure the whitelist plugin to allow the internal navigation of external sites, you can do it with allow-navigation tag like this:
<allow-navigation href="*" />

Android - Scheduling Local Notifications on PhoneGap Build / Apache Cordova 4.1.1

I'm having issues trying to schedule local notifications on an Android app (using PhoneGap build).
I'm trying to schedule a local notification at a set date and time (e.g. September 23rd 2016 at 12:00pm).
I've tried using the following plugin:
https://build.phonegap.com/plugins/2081
My config.xml file looks like this:
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
xmlns:android="http://schemas.android.com/apk/res/android"
id = "****"
versionCode = "292000"
version = "2.9.2" >
<gap:config-file platform="android" parent="/manifest">
<application android:debuggable="true" />
</gap:config-file>
<!-- versionCode is optional and Android only -->
<name>****</name>
<description>
****
</description>
<author href="****" email="****">
****
</author>
<icon src="icon.png" />
<allow-navigation href="*" />
<access origin="*" />
<preference name="phonegap-version" value="cli-5.2.0" />
<preference name="android-minSdkVersion" value="14" />
<preference name="android-targetSdkVersion" value="23"/>
<gap:plugin name='cordova-plugin-whitelist' source='npm' />
<plugin name="de.appplant.cordova.plugin.local-notification" spec="0.8.1" source="pgb" />
</widget>
I then schedule the notification using the code below:
cordova.plugins.notification.local.schedule({
title: $title,
text: $message,
at: $date
});
When building for the latest PhoneGap version (cli-6.3.0), I get the following error on the build.phonegap.com site:
Error - Some official plugins have to be updated if using PhoneGap >= 4.0.0. Please upgrade the version of any plugins that may include the following file: LocalNotification.java
It seems that the plugin has not been updated for the latest version of PhoneGap causing the build to fail.
I've tried building for the latest supported version of the plugin (PhoneGap 3.7.0). The build completes successfully and when installed directly on an Android device, everything works correctly. The notifications fire as scheduled.
However, when trying to submit this build to the Google Play store, the build is rejected with the following error:
Your APK has been rejected for containing security vulnerabilities, which violates the Malicious Behavior policy. The Alerts page has more information about how to resolve the issue. If you submitted an update, the previous version of your app is still live on Google Play.
The build now needs to use v4.1.1 of Apache Cordova to be accepted by the Google Play .
I've looked around but can't find a solution anywhere. Is anyone aware of a fix, or alternatively, a different plugin that allows scheduling of local notifications on Android supporting Apache Cordova v4.1.1 or above?
Change
<gap:plugin name='cordova-plugin-whitelist' source='npm' />
<plugin name="de.appplant.cordova.plugin.local-notification" spec="0.8.1" source="pgb" />
to
<plugin name='cordova-plugin-whitelist' source='npm' />
<plugin name="de.appplant.cordova.plugin.local-notification" spec="0.8.4" source="npm" />
I have fixed myself.
Changing the plugin name will work.
We need to find an appropriate plugin and replace older version in config.xml.
In my case, I have changed
<plugin name="de.appplant.cordova.plugin.local-notification" spec="0.8.4" source="pgb" />
to
<gap:plugin name="trunk.plugin.local-notification" />

Remote Domains are not opening with Phonegap 3.1.0

Really i have a serious problem with Phongap Build 3.1.0.
I added following code in config.xml(its under /myApp/platform/android/res/)
<access origin="http://google.com*" />
<content src="http://google.com" />
And when i open the APP its telling "The connection to the server was unsuccessfull. (http://google.com)"
Suppose if i open the URL with inAppBrowser its opening without any error.
var ref = window.open('http://google.com', '_blank', 'location=no');
Try putting this in your config.xml under www
<content src="index.html" />
<access origin="http://127.0.0.1*" />
<access origin="http://*.google.com" />
I encountered a similar problem with 3.1 and found it's because 3.1 changed the whitelisting syntax, as documented here: http://docs.phonegap.com/en/3.1.0/guide_appdev_whitelist_index.md.html
Try this:
<access origin="*://*.google.com/*" subdomains="true" />

Categories

Resources