On jelly beans android device (also ICS I believe), youtube videos in in an frame inside an android WebView stopped working in our apps many weeks ago: no video (black screen) but can hear sounds and see video controls.
I finally found one clue about what's preventing them from working.
Seems like the following needs to be set in the manifest for the video to work:
android:targetSdkVersion="8"
android:hardwareAccelerated="true"
supports-screens android:anyDensity="false"
Also on a side note, the video works fine after we click on the full screen youtube button (but I do not want to use fullscreen).
1) and 2) are not an issue for us, we can set those in the manifest (but i wonder why hardware acceleration is required).
But 3) we can't (for different reasons).
Does anyone know why anyDensity sets to false breaks videos and if there is any workaround?
some info about the apk to reproduce the issue:
apk was built with android 3.0
key extract of the manifest:
<uses-sdk android:minSdkVersion="1" android:targetSdkVersion="8"/>
<!-- android:hardwareAccelerated="true" -->
<application android:icon="#drawable/icon" android:label="#string/app_name" android:hardwareAccelerated="true">
<activity android:name=".TestHTML5WebView"
android:label="#string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
<supports-screens android:anyDensity="false"/>
...
html code used for the youtube video:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi"/>
<script type="text/javascript" charset="utf-8">
window.onerror = function(errorMsg) {
try {
alert(errorMsg);
}
catch(err) {
alert('An expected error occurred. please try again later!');
}
}
</script>
<style type="text/css" media="screen">
body {
background: #000;
margin: 0;
padding: 0;
}
.video1 {
width: 90%;
height: 90%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="video1">
<iframe width="560" height="315" src="http://www.youtube.com/embed/hH9Kx06oO_0" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
to reproduce the issue, you can use the source code from http://code.google.com/p/html5webview/source/checkout (just make sure you update the manifest.xml with the values indicated at the top of this post, targetSdkVersion, hardwareAccelerated, android:anyDensity).
thanks.
Laurent
For embedded video, the app needs surfacetexture class. This requrires android:hardwareAccelerated="true" to be set to true.
according to http://developer.android.com/guide/topics/manifest/supports-screens-element.html, android:anyDensity="false" should not be set to false.
fullscreen video uses surfaceview, surfaceview has no requirement on hardware acceleration.
Youtube Recently released player for android :
https://developers.google.com/youtube/android/player/
Related
EDIT: This bug is Webview overriding the default minimum font size.
In my example, Webview sets the minimum font-size to 8px somewhere. The solution is below :)
Android Webview rem units scale way to large.
All rem units appear 8 times too large and out of place in Android Webview.
The only rem tag that works correctly is font-size:30rem; for text. Everything else
seems to scale way to large. i.e. 100rem = 800px # 1.0px scale.
Strangely, after I pass 8.0px while scaling, the box starts to enlarge.
This example works on every browser that supports rem units except Webview.
Anyone have an idea?
Online Example: http://digitalknob.com/rem.html
JSFiddle Example: https://jsfiddle.net/aquawicket/71p49ag9/
Android Example: http://digitalknob.com/remTest.apk
I've tried mWebView.getSettings().setLoadWithOverviewMode(true);
I've tried mWebView.getSettings().setUseWideViewPort(true);
I've tried < meta name="viewport" content="width=device-width, user-scalable=no" /> and other variations.
I've tried loading a default user style sheet.
rem.html
<!DOCTYPE html>
<html style="font-size:1.0px;">
<head>
</head>
<body style="font-size:16em;">
<button style="position:absolute;width:100px;height:100px;font-size:60px;" onclick="ScaleDown()">-</button>
<button style="position:absolute;left:110px;width:100px;height:100px;font-size:60px;" onclick="ScaleUp()">+</button>
<a id="text" style="position:absolute;top:20px;left:220px;font-size:60px;">1.0px</a>
<!-- FIXME: rem units appear 8 times too large and out of place in Android Webview.
The only rem tag that works correctly is font-size:30rem;
This html file works as expexted on all other browsers. -->
<div style="position:absolute;top:115px;width:100rem;height:100rem;background-color:green;">
<a style="position:relative;top:30rem;left:16rem;font-size:30rem;">Scale</a>
</div>
<script>
var scale = window.devicePixelRatio;
Update_Scale();
function ScaleDown(){
scale -= 0.5;
Update_Scale();
}
function ScaleUp(){
scale += 0.5;
Update_Scale();
}
function Update_Scale(){
document.documentElement.style.fontSize = parseFloat(scale).toFixed(1)+"px";
document.getElementById("text").innerHTML = parseFloat(scale).toFixed(1)+"px";
}
</script>
</body>
</html>
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="digitalknob.remTest"
android:installLocation="auto"
android:versionCode="1"
android:versionName="1.0">
<uses-sdk android:targetSdkVersion="19" android:minSdkVersion="19"></uses-sdk>
<uses-permission android:name="android.permission.INTERNET"/>
<application android:label="remTest"
android:icon="#mipmap/icon"
android:theme="#android:style/Theme.NoTitleBar.Fullscreen">
<activity android:name="digitalknob.remTest.WebviewActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
WebviewActivity.java
package digitalknob.remTest;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
public class WebviewActivity extends Activity {
private WebView mWebView;
#Override protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);
mWebView=(WebView)findViewById(R.id.webview_webview);
mWebView.setWebContentsDebuggingEnabled(true); //Debuggable in Chrome
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setUseWideViewPort(true);
mWebView.loadUrl("http://digitalknob.com/rem.html");
}
#Override public void onBackPressed(){
System.exit(0);
}
}
webview.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<WebView
android:id="#+id/webview_webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</RelativeLayout>
I found that setting the following webview settings will act as a workaround for this bug.
mWebView.getSettings().setMinimumFontSize(1);
mWebView.getSettings().setMinimumLogicalFontSize(1);
setMinimumFontSize
These settings really should only be honored for actual text display, not rem based positioning/sizing. This must but an android webview bug.
I debugged the css used with version 2 player.js (0002/player.js) and found the css below for the RED Overlay i want to remove from my default receiver.
from player.css
#player[type="video"][state="idle"]:after {
content: "SAMPLE";
position: absolute;
left: 0;
right: 0;
top: 50%;
bottom: 0;
text-align: center;
font-size: 50px;
margin-top: -150px;
opacity: 0.1;
color: red;
}
As the default player.js cycles thru states [IDLE PLAY BUFFER] the red , transparent overlay, "SAMPLE" is displayed.
I want to get rid of that feature when i play my own mp4s.
So, I removed the offending css above and i hosted the new css file without the red sample.
I went to the dev console for "Google Cast SDK" and changed the custom style to the URL for my hosted CSS file.
I wait 4 hours.
I reboot the chromecast device.
I manually reload the window in the debugger console for the device.
And , i still see the old CSS with the red SAMPLE.
What do i have to change to get rid of that CSS on the player.js used with the default receiver?
Below is the html loaded in the debugger for the chromecast device by my android app.
<html><head>
<title>Cast Media Player</title>
<link rel="stylesheet" href="0002/player.css">
<script type="text/javascript" src="0002/player.js"></script><link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/gtv-videos-bucket/receivers/f742e4109ea711e3a5e20800200c9a66/style.css">
<script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
<script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/mediaplayer/0.3.0/media_player.js"></script>
</head>
<body>
<div id="player" class="gcpa" type="video" state="playing"><div class="background"></div><div class="gcpb" style=""><video style="background-image: none;" src="http://....0685/fade0569-bd5b-4cc2-a05d-85cb24860c56-20140430101403.mp4"></video><div class="logo"></div><div class="gcpr"></div><div class="splash"></div><div class="watermark"></div><div class="gcpc"></div><div class="gcpd"><div class="gcph"><div class="gcpg" style="background-image: url(http://.....ecb7c32-me1563624197.jpg);"></div><div class="gcpf"><div class="gcpi">the light the Divinity t</div><div class="gcpj"><div><span>robrowntree</span></div><div><span>the light the Divinity the absolute poise Aaron rumpled beds at morning </span></div></div></div></div><div class="gcpk"><span class="gcpl"></span><span class="gcpp">00:08</span><span class="gcpq">00:10</span><div class="gcpm"><div class="gcpn progressBar" style="width: 80%;"></div><div class="gcpo" style="left: 80%;"></div></div></div></div></div><div class="message"></div></div>
<script>
var playerDiv = document.querySelector("#player");
new castplayer.CastPlayer(playerDiv).start();
</script>
</body></html>
If you use the applicationId "CC1AD845", then the SAMPLE is removed.
This is the default application ID and defined by constant CastMediaControlIntent.DEFAULT_MEDIA_RECEIVER_APPLICATION_ID.
I am not clear what the issue is here. If you use the "Default Receiver" or your own Styled Receiver, there will be no SAMPLE watermark at all; if you use the receiver that CastVideos app is using, you'll see that big red watermarking (which you will not be able to remove).
I made a simple application in Intel XDK.
When I was testing the application I noticed that they enabled the accelerometer.
For this application it's needed to have only 1 position.
How can I disable the accelerometer?
Thanks in advance.
Its not accelerometer that is causing, its the device orientation that needs to fixed.
Call this API to fix the orientation: intel.xdk.device.setRotateOrientation(ORIENTATION); after intel.xdk.device.ready has fired.
Full documentation is here
Portrait: intel.xdk.device.setRotateOrientation("portrait");
Landscape: intel.xdk.device.setRotateOrientation("landscape");
Both: intel.xdk.device.setRotateOrientation("any");
Below is sample code:
<!DOCTYPE html>
<html>
<head>
<title>XDK</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<script src="intelxdk.js"></script>
<script>
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
function onDeviceReady(){
// set orientation
intel.xdk.device.setRotateOrientation('landscape');
// intel.xdk.device.setRotateOrientation('portrait');
// intel.xdk.device.setRotateOrientation('any');
intel.xdk.device.hideSplashScreen();
}
</script>
<style>
body {font-family:arial;background-color:white}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>Locked to Landscape</p>
</body>
</html>
That is possible do it the way next:
Go the project properties.
Build Settings
Orientation
You select, landscape or portrait.
If you emule the project, you see the changes.
use the setRotateOrientation-Method:
To lock the device in portrait mode, use:
intel.xdk.device.setRotateOrientation("portrait");
Works on Android as well as iOS.
See: Documentation
Easier is to go to Build Settings -> Your Platform -> Orientation. That very fast and simple.
I have a strange problem in my PhoneGap-based android app. On certain screens, the
number 9 key is completely ignored. This happens on all my Android
2.X devices. I have tried with previous versions of PG and found that
the problem first occurred in v1.2.
Here is the code to a sample index.html file that should reproduce the issue. On both Android 2.2 and 2.3, the text boxes labeled as "broken" do not accept the number 9 as input.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
body
{
margin:0;
padding:0;
font-size:20px;
}
input
{
height:20px;
}
#container_second
{
overflow:hidden;
position:relative;
width:100%;
height:150px;
}
#container_second div
{
left: -2000px;
position: absolute;
-webkit-transform: matrix(1, 0, 0, 1, 2000, 0);
}
</style>
</head>
<body>
<br />
<div id="container_first">
<div>
Working Text: <br /><input type="text" /><br /><br />
Working Tel: <br /><input type="tel" />
</div>
</div>
<br /><br />
<div id="container_second">
<div>
Broken Text: <br /><input type="text" /><br /><br />
Broken Tel: <br /><input type="tel" />
</div>
</div>
</body>
</html>
It might be related to this issue. For some reason PhoneGap is calling setNavDump on the web view's WebSettings. setNavDump is an obsolete method according to the android docs so you should be fine if you disable it.
One way to do it is by overriding the init method in your class that extends DroidGap
#Override
public void init() {
super.init();
this.appView.getSettings().setNavDump(false);
}
If that doesn't work, try adding it after the loadUrl call in the existing onCreate method:
#Override
public void onCreate(Bundle savedInstanceState) {
//... snip ...
super.loadUrl("file:///android_asset/www/index.html", 12000);
this.appView.getSettings().setNavDump(false);
//... snip ...
}
I had the same issue. Turns out that you need to specify the Android SDK version via the API number in the config.xml file
add:
<preference name="android-minSdkVersion" value="8" />
I have developed a phonegap application in eclipse(for android). I had the same problem. When i pressed on 7, the application stopped and when i press on 9, the application do nothing in the text area components. It was also a problem appears on android versions 2.2 & 2.3.3. In the layout, there were a structure such as frame->frame->linear layout. And then i removed both of the frames. I just used linear layout and then the problem solved. I can press on 7 & 9 and there is no problem in the application. I mean, you should check for the unused layout components.
I created a sample script to add and remove metatags from the head. But Android 2.2 doesn't seem to respect it's removal. However it does respect the addition of the metatag on click for example.. How do I get it to respect the removal of the tag and revert to the default viewport through javascript?
<script type="text/javascript">
$(document).ready(function(){
function initMeta(){
var headID = document.getElementsByTagName("head")[0];
var metaNode = document.createElement('meta');
metaNode.name = 'viewport';
metaNode.content = 'width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0';
metaNode.id = 'metatag';
headID.appendChild(metaNode);}
function closeMeta(){
$("#metatag").remove();}
$("#add").click(function(){initMeta();alert("meta opened");});
$("#del").click(function(){closeMeta();alert("meta closed");});
});
</script>
<input name="add" type="button" value="add metatag" id="add"/>
<input name="del" type="button" value="delete metatag" id="del"/>
I note this behavior in iOS Safari too.
You are actually removing the meta tag (verifiable through DOM - Try alerting $("#metatag").length after removal)
The problem is the viewport itself does not respond to the absence of content in this tag. If you update the contents or re-add the meta tag with new contents, you should see it manifest on your screen. But by simply removing the meta tag, the UA seems to think "No change necessary" as it's not getting any explicit instructions there.
Hope that helps! Your question / example helped me realize this was even possible!