Interfacing with Html And Android - android

I have developed a media player in Html.Now my job is to play streaming Url in Html coded media player coming from Android activity.So i have need to pass url from android activity to Html media player files where it will be play.I have searched lot but haven't find any good solution.please suggest me. Thanks
Java Code
setContentView(R.layout.main);
// String LocalFile = "file:///android_asset/android.html";
WebView webView = (WebView) findViewById(R.id.webView1);
String html = "<embed src=\"file:///android_asset/"
+ "android.html"
+ " \"play=\"true\" loop=\"true\" width=\"100%\" height=\"100%\"> <embed>";
webView.getSettings().setPluginState(WebSettings.PluginState.OFF);
webView.getSettings().setPluginsEnabled(true);
webView.getSettings().setAllowFileAccess(true);
webView.getSettings().setJavaScriptEnabled(true);
webView.loadDataWithBaseURL("file:///android_asset/", html,
"text/html", "utf-8", null);
String str = "rtmp://23.21.155.146:554/9016012507701502509011502505116016019xm150.sdp";
webView.loadUrl("javascript:passWebUrl('" + str + "')");
My Code for media player
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css" media="screen">
html, body{
margin:0;
padding:0;
height:100%;
}
#altContent{
width:100%;
height:100%;
}
</style>
<title>YOUR TITLE HERE!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
function passWebUrl(url)
{
alert(url);
}
flashvars.HaloColor = "0x0086db";
flashvars.ToolTips = "true";
flashvars.AutoPlay = "true";
flashvars.VolumeLevel = "50";
flashvars.CaptionURL = "YOUR CAPTION HERE";
flashvars.Title = "YOUR TITLE HERE";
flashvars.Logo = "";
flashvars.SRC = "Here is my url link should comes from Android Activity";
flashvars.BufferTime = "5";
flashvars.AutoHideControls = "false";
flashvars.IsLive = "true";
var params = {};
params.wmode = "transparent";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "L3MP";
swfobject.embedSWF("http://media-player.cdn.level3.net/flash/v1_1_1/Level3MediaPlayer.swf", "altContent", "100%", "100%", "10.1.0","http://media-player.cdn.level3.net/flash/v1_1_1/expressInstall.swf", flashvars, params, attributes);
</script>
</head>
<body>
<div id="altContent">
<center> <BR><BR><span style="color:red"><b>Please Install Adobe Flash Player</b>
</span><BR><BR>
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</center>
</div>
</body>
</html>
</script>
</html>

For passing the value of variable from your java class to the javascript function in your html page you have to use this code. Try this:
String str = "variable_value";
webView.loadUrl("javascript:functionName('"+ str +"')");
EDIT : -
function passWebUrl(url)
{
alert(url);
}

Related

Slow performance leafletjs in WebView on Android

I'm using leafletjs in an Android Application to render local polygons (without CRS Information) in geojson format, without maptiles. Unfortunately, zooming and other touch movement are very laggy. My geojson file contains 3000 polygons. Is there any solution to this problem, the only thing I can find is a solution for markers.
This is how it looks:
Here is my code:
In onCreate:
public void loadMap(){
scanFiles();
checkStoragePermissions();
webview = (WebView) findViewById(R.id.myWebView);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
// chromium, enable hardware acceleration
webview.setLayerType(View.LAYER_TYPE_HARDWARE, null);
} else {
// older android version, disable hardware acceleration
webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
WebSettings webSettings =
webview.getSettings();
webSettings.setAllowFileAccess(true);
webSettings.setAllowFileAccessFromFileURLs(true);
webSettings.setJavaScriptEnabled(true);
webview.setWebContentsDebuggingEnabled(BuildConfig.DEBUG);
webview.setWebChromeClient(
new WebChromeClient());
File leafletMap = new File(Environment.getExternalStorageDirectory(), "/LeafletMap/Map.html");
webview.loadUrl("file:///" + leafletMap.getAbsolutePath());
}
And my HTML-File:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="file:///android_asset/leaflet/leaflet.css">
<script type="text/javascript" src="file:///android_asset/leaflet/leaflet.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #mapid {
height: 100%;
width: 100vw;
}
</style>
</head>
<body>
<div id="mapid"></div>
<script>
var mymap = L.map('mapid', {
crs: L.CRS.Simple
});
//Add local
var layer;
const xhr = new XMLHttpRequest();
xhr.open('GET', 'file:///android_asset/poly.json');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'json';
xhr.onload = function () {
if (xhr.status !== 200) return
var blahlayer = L.geoJSON(xhr.response).getBounds();
mymap.fitBounds(blahlayer);
L.geoJSON(xhr.response).addTo(mymap);
};
xhr.send();
</script>
</body>
</html>

Android WebView - CSS not working

Using Android 5.0.2...
The following is not showing up properly. I am unable to see any styling.
<!DOCTYPE html>
<html>
<head>
<style>
.bodyBG{
background: linear-gradient(#88DDFF, #55AAFF);
width:100%;
height:100%;
background-position: 0, 0;
background-size: 100%, 100%;
position: absolute;
}
</style>
</head>
<body>
<div class="bodyBG">
...
</div>
</body>
</html>
The WebView is loaded with the HTML like that.
WebView webView = (WebView) findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
InputStream inputStream = context.getResources().openRawResource(R.raw.html_page);
byte[] bytes = new byte[inputStream.available()];
inputStream.read(bytes);
final String html = new String(bytes);
webView.loadData(html, "text/html", null);
webView.addJavascriptInterface(new JSWebApp(), "app");
How to fix it?

android webview doesn't render bullets properly

I have an android email client. When it receives message from an outlook2011 in mac, I get a html data like this:
<html><head></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; color: rgb(0, 0, 0); font-size: 14px; font-family: Calibri, sans-serif; "><ol><li>One</li><li>Two</li><li>Three</li></ol></body></html>
And it shows the bullets properly.
However, When I receive similar message from Outlook2013 in Windows, I get this html data:
<html>
<head>
<style>
<!--
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif"}
-->
</style>
</head>
<body lang="EN-US" link="#0563C1" vlink="#954F72">
<div class="WordSection1">
<p class="MsoListParagraph" style="text-indent:-.25in"><span style="">1.<span style="font:7.0pt "Times New Roman"">
</span></span>one</p>
<p class="MsoListParagraph" style="text-indent:-.25in"><span style="">2.<span style="font:7.0pt "Times New Roman"">
</span></span>two</p>
<p class="MsoListParagraph" style="text-indent:-.25in"><span style="">3.<span style="font:7.0pt "Times New Roman"">
</span></span>three</p>
</div>
</body>
</html>
And the webview in my app fails to render the bullets. It shows the text, but no bullets (numbered list).
The webview code is simple one.
private WebView mMessageContentView; //declaration
onCreate() {
mMessageContentView = whatever.getView(view, R.id.message_content);
//setup some zoom settings etc etc
mMessageContentView.setWebViewClient(someWebViewClientInstance);
}
private void setMessageHtml(String html) {
if (html == null) {
html = "";
}
if (mMessageContentView != null) {
mMessageContentView.loadDataWithBaseURL("email://", html, "text/html", "utf-8", null);
}
}
How can I fix this?
I added the following definition in style.css file in assets folder.
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:Cambria;}
p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
{margin-top:0in;
margin-right:0in;
margin-bottom:0in;
margin-left:.5in;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:Cambria;}
.MsoChpDefault
{font-family:Helvetica;}
Then the following code edit to add the external css file.
private void setMessageHtml(String html) {
if (html == null) {
html = "";
}
if (mMessageContentView != null) {
String htmlWithExternalCSS = addStyleDefinition(html);
mMessageContentView.loadDataWithBaseURL("email://", htmlWithExternalCSS, "text/html", "utf-8", null);
}
}
private String addStyleDefinition(String html) {
//insert at the end of <head> tag
String headTag = "<head>";
int index = html.indexOf(headTag);
StringBuffer buff = new StringBuffer(html);
buff.insert(index+headTag.length(), "<link rel=\"stylesheet\" type=\"text/css\" href=\"file:///android_asset/style.css\" />";);
return buff.toString();
}

check this value with the Android Webview After saving the values to the local storage on the Android browser

I'm going to check this value with the Android Webview After saving the values ​​to the local storage on the Android browser.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>HTML5</title>
<script>
window.onload = function(){
loadStorage();
document.querySelector("form").onsubmit = saveStorage;
};
function saveStorage(){
var saveId = document.getElementById("saveId").checked;
var userId = document.getElementById("userId").value;
if(saveId){
window.localStorage.setItem("userId", userId);
window.localStorage.setItem("userIdSaved", true);
}else{
window.localStorage.removeItem("userId");
window.localStorage.setItem("userIdSaved", false);
}
}
function loadStorage(){
var userId = window.localStorage.getItem("userId");
document.getElementById("userId").value = userId;
if(userId!=null){
document.getElementById("saveId").checked = true;
}
}
</script>
</head>
<body>
<h1>Login(Web Storage)</h1>
<form action="login.php" method="post">
<fieldset>
id: <input type="text" name="id" id="userId" autocomplete="off">
<input type="checkbox" id="saveId">Save ID<br>
pass: <input type="password"><br>
<input type="submit" value="login">
</fieldset>
</form>
</body>
</html>
However, if you run a webview not output the value stored in the Android browser.
Check the values ​​by executing the Webview, but does not save local storage in
<html>
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
<?
$Id = $_POST['id'];
?>
<script>
window.onload = function(){
var userId = window.localStorage.getItem("userId");
alert(userId);
init();
};
function init(){
var list = document.getElementById( "list");
list.innerHTML = "";
for( var i = 0; i < localStorage.length ; i++){
var key = localStorage.key(i);
list.options[list.options.length] = new Option(localStorage[key],key);
}
}
</script>
<body>
<h1>Result</h1>
<p>Welcome to <?=$Id?> </p>
home<br/>
<select id = "list" size= "10"></ select>
<fieldset >
key : <input type = "text" id= "key"/>
value : <input type = "text" id= "value"/>
</fieldset >
</body>
</html>
To show the value stored in the Webview, how can I do?
I am not sure you can use web localStorage inside WebView. However you may store values in the application preferences. Implement corresponding methods in your custom Javascriptinterface. See https://stackoverflow.com/a/10389678/527759

Android Webview cannot load CSS and show blockquote font color effect

I have got the following html to be loaded on CSS through android webview . When it comes to the execution. there has no obseravle changes to the font color changes onto my wordings tagged by blockquote
the below is my html code :
<html>
<head>
<title>Example</title>
<link rel="stylesheet" type="text/css" href="file:///android_asset/style.css" />
</head>
<blockquote>拜年根本係學溝通同交際#hehe#</blockquote>
<br/><br/>唔明點解去完親戚屋企拜年 過幾日親戚要黎返我屋企再拜過年 [banghead]
</body>
</html>
CSS:
#CHARSET "UTF-8";
blockquote{
color:#d4d3d3
}
Actual android code
viewHolder.txContent = (WebView) v.findViewById(R.id.replycontent);
WebSettings settings = viewHolder.txContent.getSettings();
settings.setDefaultTextEncodingName("utf-8");
settings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
viewHolder.txContent.setFocusable(false);
viewHolder.txContent.setClickable(true);
viewHolder.txContent.setBackgroundColor(Color.parseColor("#00FFFFFF"));
String htmlPreffix = "<html><head><title>Example</title><link rel=\"stylesheet\" type=\"text/css\" href=\"file:///android_asset/style.css\" /></head>";
String htmlSuffixString = "</body></html>";
System.out.println("htmlParsed");
System.out.println(htmlPreffix + htmlParsed + htmlSuffixString);
viewHolder.txContent.loadDataWithBaseURL(null, htmlParsed, "text/html", "utf-8", null);
You're missing the opening <body> tag.

Categories

Resources