I have a WebView that is loading html tags using loaddata method .All the tags are getting rendered except the videourl.
Can some one help me out?
htmlstring="<html> <head> <link href="http://amp.azure.net/libs/amp/1.7.1/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet"> <script src="http://amp.azure.net/libs/amp/1.7.1/azuremediaplayer.min.js"></script> </head> <body> <h1>Skill Cloud</h1> <video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0" data-setup='{"techOrder": ["azureHtml5JS", "flashSS", "html5FairPlayHLS","silverlightSS", "html5"], "nativeControlsForTouch": false}'> </video> <script> var myOptions = { autoplay: false, controls: true, width: "100%", height: "auto", poster: "" }; var myPlayer = amp("azuremediaplayer", myOptions); myPlayer.src([{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" }, ]); </script> <br /> <p>© Microsoft Corporation 2016</p> <video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls autoplay width="640" height="400" poster="" data-setup='{}' tabindex="0"> <source src="http://b028.wpc.azureedge.net/80B028/Samples/a38e6323-95e9-4f1f-9b38-75eba91704e4/5f2ce531-d508-49fb-8152-647eba422aec.ism/manifest" type="application/vnd.ms-sstr+xml" /> <p class="amp-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p> </video> </body> </html>"
mWebView.loadData(htmlstring, "text/html; charset=UTF-8", null);
The video source url is not getting rendered
you have enabled javascript ?
yourWebViewb.getSettings().setJavaScriptEnabled(true);
EDIT:
I've tested your code and it works for me this way
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH);
webview.getSettings().setBuiltInZoomControls(false);
webview.getSettings().setLoadWithOverviewMode(true);
webview.getSettings().setLoadsImagesAutomatically(true);
webview.getSettings().setUseWideViewPort(true);
webview.setWebChromeClient(new WebChromeClient());
String htmlstring = "<html> <head> <link href=\"http://amp.azure.net/libs/amp/1.7.1/skins/amp-default/azuremediaplayer.min.css\" rel=\"stylesheet\"> <script src=\"http://amp.azure.net/libs/amp/1.7.1/azuremediaplayer.min.js\"></script> </head> <body> <h1>Skill Cloud</h1> <video id=\"azuremediaplayer\" class=\"azuremediaplayer amp-default-skin amp-big-play-centered\" tabindex=\"0\" data-setup='{\"techOrder\": [\"azureHtml5JS\", \"flashSS\", \"html5FairPlayHLS\",\"silverlightSS\", \"html5\"], \"nativeControlsForTouch\": false}'> </video> <script> var myOptions = { autoplay: false, controls: true, width: \"100%\", height: \"auto\", poster: \"\" }; var myPlayer = amp(\"azuremediaplayer\", myOptions); myPlayer.src([{ src: \"http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest\", type: \"application/vnd.ms-sstr+xml\" }, ]); </script> <br /> <p>© Microsoft Corporation 2016</p> <video id=\"azuremediaplayer\" class=\"azuremediaplayer amp-default-skin amp-big-play-centered\" controls autoplay width=\"640\" height=\"400\" poster=\"\" data-setup='{}' tabindex=\"0\"> <source src=\"http://b028.wpc.azureedge.net/80B028/Samples/a38e6323-95e9-4f1f-9b38-75eba91704e4/5f2ce531-d508-49fb-8152-647eba422aec.ism/manifest\" type=\"application/vnd.ms-sstr+xml\" /> <p class=\"amp-no-js\">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p> </video> </body> </html>";
webview.loadDataWithBaseURL(null, htmlstring, null, "UTF-8", null);
I tried load data with "loadData" but not work use instead "loadDataWithBaseURL", try my code, works for me in android 4.2
Related
For a school project I've to do a PhoneGap application. I want to do a div with a map, and after makes interest points. But it's impossible to have it in my android emulator, got the error "referenceError can't find variable google". I tried a lot of solution I've found and the only thing I can do it's to show a little piece of map on the top of my application, but only on an internet browser.
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="jquery.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.3.0.css" />
<script src="jquery.mobile-1.3.0.js"></script>
<script src="jquery.mobile-1.3.0.min.js"></script>
<style type="text/css">
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
}
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBKh2nx6OdT6pdPi-KtPNH_6Lc7Aj9z7d4&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
</head>
<body>
If someone have a piece of code working on his computer, or find an error on mine i would be very happy.
Thanks.
The following works for me in my Nexus 4 emulator. Taken mostly from Google Maps JavaScript API:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script scr="jquery.js></script>
<link rel="stylesheet" href="jquery.mobile-1.3.0.css" />
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.0.min.js"></script>
<style type="text/css">
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
I wish to make a tag's height and width to 100%, now in other examples it worked using tag demonstrated below. But in the code given below, if I remove the "style="width: 370px; height: 505px"" from the and add the following code after meta tag
<style type="text/css>
body{
height:100%;
width:100%;
}
#map-canvas{
height:100%;
width:100%;
}
</style>
it doesn't work.
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"> </script>
<script type="text/javascript">
var shape;
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
shape = new google.maps.Polygon({
strokeColor: '#ff0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#ff0000',
fillOpacity: 0.35
});
shape.setMap(map);
google.maps.event.addListener(map, 'click', addPoint);
}
function addPoint(e) {
var vertices = shape.getPath();
vertices.push(e.latLng);
}
function clearmap(){
initialize();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body style="font-family: Arial; border: 0 none;">
<div id="map-canvas" style="width: 370px; height: 505px"></div>
<input type="button" value="click" onclick="clearmap"()>
</body>
I made a jsfiddle out of your code
http://jsfiddle.net/jRwDs/3/
...and the answer from Rohit Azad, to add the html tag to the document style, seems to fix your problem (at least on jsfiddle).
Javascript does not work outside index.html page:
Project Test 1:
Index.html (with GEOLOCATION PAGE CODE) works fine
Project Test 2:
Index.html (with MENU PAGE CODE)
Geolocation.html (with GEOLOCATION PAGE CODE) javascript does not work
The page Geolocation.html opens up, but javascript does not run.
What am i missing?
GEOLOCATION PAGE CODE:
<!DOCTYPE html>
<html>
<head>
<!-- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />-->
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.5.0.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var element = document.getElementById('geoTemp');
element.innerHTML = 'Ready...';
navigator.geolocation.getCurrentPosition(onSuccess, onError, { maximumAge: 3000, timeout: 10000, enableHighAccuracy: false });
}
function onSuccess(position) {
var element = document.getElementById('geoTemp');
element.innerHTML = 'Success...';
initialize(position.coords.latitude, position.coords.longitude);
}
function onError(error) {
var element = document.getElementById('geoTemp');
element.innerHTML = 'Error...';
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
function initialize(latitude, longitude) {
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
function onBodyLoad(){
alert("test!");
}
</script>
</head>
<body>
<h2>Location</h2>
<p id="geolocation">Finding geolocation...</p>
<p id="geoTemp"></p>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
MENU PAGE CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.0.css">
<link rel="shortcut icon" href="favicon.ico">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.0.js"></script>
<script type="text/javascript" src="js/cordova-2.5.0.js"></script>
</head>
<body>
<div data-role="page" id="pageMain">
<div data-role="header">
<h1>
TestPage
</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="geolocation.html" data-transition="slide">
<h2>Geolocation Test</h2>
<p>Testing</p>
</a></li>
</ul>
</div>
</div>
</body>
</html>
I have also tried to add an onload function to the body tag and call a test function but it didn't work either.
In the link to geolocation.html, add this attribute data-ajax="false". This will prevent jQuery from loading the page via Ajax.
I am trying to stream video from Wowza to Android. I tried setting a MediaPlayer() and path "rtsp://184.72.239.149/vod/mp4:BigBuckBunny_175k.mov", but with no success. I get this:
ARTSPConnection: Server unexpectedly closed the connection.
Any suggestions on how I could solve this?
This is how we need to stream from wowza:
String SrcPath ="rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov";
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
VideoView myVideoView = (VideoView)findViewById(R.id.myvideoview);
myVideoView.setVideoURI(Uri.parse(SrcPath));
Log.i("parse path",Uri.parse(SrcPath)+"");
myVideoView.setMediaController(new MediaController(this));
myVideoView.requestFocus();
myVideoView.start();}
But before you do this, copy 'bigbuckbunny' video file to 'vod' folder in your wowza setup.
Well my soltuion was to create a HTML page that would take as a parameter the RTMP url and using Flash Media Playback would play the stream through flash...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<title>#############</title>
<script type="text/javascript">
function resizeHandler()
{
var flash = document.getElementById("FlashMovie");
window.scrollTo(0, 1);
flash.focus();
flash.focus();
}
window.onresize = resizeHandler;
window.onload = resizeHandler;
</script>
</head>
<body style="margin:0; padding:0; background: #000;">
<div style="margin:0; padding:0; width:100%; height:100%">
<embed id="FlashMovie" style="width:100%; height:100%" src="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" fullScreenOnSelection="true" scale="showall" flashvars="src=rtmp%3A%2F%2F########%2Flive%2FmyStream.sdp&playButtonOverlay=true&loop=true&autoPlay=true&streamType=live&initialBufferTime=2" pluginspage="https://play.google.com/store/apps/details?id=com.adobe.flashplayer"></embed>
</div>
<br /><br /><br />
</body>
</html>
I am using the following code to display an HTML page in a webview:
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.socialmedia
);
webview = (WebView) findViewById(R.id.webview);
webview.loadUrl("file:///android_asset/www/facebook.html");
And the HTML page:
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
</head>
<body>
<div id="container"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1" ></script>
<fb:like-box href="http://www.facebook.com/workatcareerbuilder" width="292" show_faces="true" stream="true" header="true" hScrollbar:true></fb:like-box>
<!-- <script>
function twitter(){
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 6,
interval: 6000,
title: '#palafo',
width: 250,
height: 300,
theme: {
shell: {
background: '#ad0000',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#ad0000'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
}).render().setUser('imomentous').start();
}
</script> -->
</body>
</html>
But it shows nothing on screen. Please help. I have kept Internet permission also.
I found this logcat message:
06-28 06:33:50.510: INFO/GATE(20523): <GATE-M>DEV_ACTION_COMPLETED</GATE-M>
Thanks.
I think it may be that WebView doesn't, by default, allow javascript to execute. If that's the case then you only need to enable javascript:
webview.getSettings().setJavaScriptEnabled(true);