I want to show some html content in webView. Here is my code:
String htmlContent = "..."; // some content here
webViewContent.getSettings().setJavaScriptEnabled(true);
webViewContent.setWebViewClient(new WebViewClient());
webViewContent.setHorizontalScrollBarEnabled(false);
webViewContent.setHorizontalScrollBarEnabled(false);
webViewContent.getSettings().setSupportMultipleWindows(false);
webViewContent.getSettings().setAllowFileAccess(true);
webViewContent.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
webViewContent.setWebChromeClient(new WebChromeClient());
webViewContent.setBackgroundColor(ContextCompat.getColor(context, R.color.background_final_page));
webViewContent.loadDataWithBaseURL(null, htmlContent , "text/html", "UTF-8", null);
It shows text and images well, but when i have iframe in htmlContent , for example
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://www.facebook.com/plugins/post.php?href=link" width="100%"></iframe>
webView shows iframe not correctly, with cropped height.When i added height="100%" to iframe code, it has no result. When i set height=600 or height=400, it works, but i cannt know in advance height size of iframe.
So, how i can to fix it?
Related
So I am trying to display a gif that I am pulling from reddit in a webview in my app. From the reddit api I retrieve a JSON of a posts data, and from media_embed/content I get the html of an iFrame from Gyfcat that looks like this:
<iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgfycat.com%2Fifr%2Fhalffeistyharlequinbug&display_name=Gfycat&url=https%3A%2F%2Fgfycat.com%2Fhalffeistyharlequinbug&image=https%3A%2F%2Fthumbs.gfycat.com%2FHalfFeistyHarlequinbug-size_restricted.gif&key=2aa3c4d5f3de4f5b9120b660ad850dc9&type=text%2Fhtml&schema=gfycat" width="600" height="600" scrolling="no" title="Gfycat embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe>
To this I URLDecode it like so:
val gifData = json["media_embed"]["content"]
val decoded = URLDecoder.decode(gifData, "UTF-8")
And I display it like so:
feedItemWebView.settings.javaScriptEnabled = true
feedItemWebView.loadData(decoded, "text/html", "UTF-8")
This gives me something that looks like this:
Instead of using URLDecoder I also tried doing this:
val decoded = gifData.replace("<", "<")
.replace(">", ">")
.replace("&", "&")
And putting this in the WebView in the same way as above results in the webview loading, but just displaying a still image (and not the gif as expected) like this:
Is there something I am missing that I need to do in order for it to actually play the gif?
If I try putting the same thing into an html file like this:
<iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgfycat.com%2Fifr%2Fhalffeistyharlequinbug&display_name=Gfycat&url=https%3A%2F%2Fgfycat.com%2Fhalffeistyharlequinbug&image=https%3A%2F%2Fthumbs.gfycat.com%2FHalfFeistyHarlequinbug-size_restricted.gif&key=2aa3c4d5f3de4f5b9120b660ad850dc9&type=text%2Fhtml&schema=gfycat" width="600" height="600" scrolling="no" title="Gfycat embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe>
my browser will load it correctly, so it must be something wrong with the WebView or my WebView settings
The issue was coming from a wrong configuration of the WebView. In fact, reading the logcat, this information came out from the webview:
I/chromium: [INFO:CONSOLE(26)] "Error reading storage", source: https://gfycat.com/assets/app.bfa24b4d87267ff469b0.js (26)
The iframe is loading an external script which use html5_webstorage also called localStorage. It is disabled by default in the webview (Security reason), so trying to access it was throwing an error which was preventing the video to play.
Therefore we need to turn it on like follow:
String data = "<iframe class=\"embedly-embed\" src=\"https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgfycat.com%2Fifr%2Fhalffeistyharlequinbug&display_name=Gfycat&url=https%3A%2F%2Fgfycat.com%2Fhalffeistyharlequinbug&image=https%3A%2F%2Fthumbs.gfycat.com%2FHalfFeistyHarlequinbug-size_restricted.gif&key=2aa3c4d5f3de4f5b9120b660ad850dc9&type=text%2Fhtml&schema=gfycat\" width=\"600\" height=\"600\" scrolling=\"no\" title=\"Gfycat embed\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen=\"true\"></iframe>\n";
webview = findViewById(R.id.webview);
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setDomStorageEnabled(true);
webview.getSettings().setDatabaseEnabled(true);
webview.loadData(data, "text/html", null);
I tested it on a really simple project considering you already got the iFrame html.
I'd like to play youtube video by using android webview. But I want to fit my webview to youtube video size. Until now, my implementaion is like below.
String vid = TextUtils.extractYoutubeVId(body);
if (StringUtils.isBlank(vid)) {
return null;
}
String html = "<html > <head></head> <body style=\"margin:0 0 0 0; padding:0 0 0 0;\"> <iframe width=\"100%\" height=\"100%\" src=\"http://www.youtube.com/embed/___\" frameborder=\"0\"></iframe> </body> </html> ";
html = html.replace("___", vid);
mImportedVideoWebview.setWebChromeClient(new WebChromeClient());
WebSettings webSettings = mImportedVideoWebview.getSettings();
webSettings.setJavaScriptEnabled(true);
mImportedVideoWebview.loadData(html, "text/html", "utf-8");
mImportedVideoWebview is just a WebView and its width is MATCH_PARENT and height is 350dp.
By using above code, I can play youtube video.
But, I want to put my webview width to screen width and fit my webview's height to youtube video height proportionally. Anyone help me plz!
Thanks!
Use below code snipe hope it will
<html><body><iframe frameborder=0 allowfullscreen width=100% height=100% src=link frameborder=0 allowfullscreen></iframe></body></html>
You can use:
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
how can I change text direction to the Right to Left in webview ?
This is my code
WebView web = (WebView) findViewById(R.id.web);
web.getSettings().setJavaScriptEnabled(true);
web.loadDataWithBaseURL("", myhtml, "text/html", "UTF-8", "");
I think that you need to change the dir="RTL in your HTML code.
for example:
<body dir="rtl">
<p>Some Text that will be RTL aligned</p>
</body>
WebView just allow you to view webpages but doesn't change the text direction. That only depends on the HTML markup in the web page.
If it still doesn't work, you might have issues in your HTML. You can share your code here and I can try to help you further.
Tom.
it work for me:
desc.loadDataWithBaseURL("http://www.atfonline.ir/", "<html dir=\"rtl\" lang=\"\"><body>" + outhtml + "</body></html>", "text/html", "UTF-8", null);
how is it possible to view a video from vimeo embed code in a webview in android?
I only hear the audio but the video stays black.
wb.getSettings().setJavaScriptEnabled(true);
wb.setWebViewClient(new WebViewClient());
wb.setWebChromeClient(new WebChromeClient());
wb.loadDataWithBaseURL(wb.getUrl(),
"<iframe src=\"http://player.vimeo.com/video/**********?title=0&byline=0&portrait=0\" width=\"500\" height=\"281\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>",
"text/html",
"utf-8",
null);
way too late to the party here,
i didnt use i did it like this and it works for me.
webView.loadUrl("http://player.vimeo.com/video/" +"insert video id here"+ "?player_id=player&autoplay=1&title=0&byline=0&portrait=0&api=1&maxheight=680&maxwidth=1000");
and change width and height according to your needs
This is about loading youtube videos using latest embedded format (iframe) inside a webview.
Example of the iframe embed format
<iframe width="637" height="358" src="http://www.youtube.com/embed/olC42gO-Ln4?fs=1&feature=oembed" frameborder="0" allowfullscreen=""></iframe>
Test the code on Android 2.3.3 & 3.2 devices (HTC Desire & Asus Transformer), the webview would only show a black rectangle.
I tried a similar embed from vimeo
<iframe src="http://player.vimeo.com/video/35693267" width="640" height="360" frameborder="0"></iframe>
In 2.3, video played correctly
In 3.2, a black rectangle flashed and disappeared, the iframe area is blank.
Finally if the old embed format (using the object tag) is used, the video is displayed properly inside the webview in both 2.3.3 & 3.2.
I have checked related questions and added
android:hardwareAccelerated="true"
in the application and/or activity tag but still no video in both 2.3 & 3.2 devices.
This is a big problem because more websites are now using the newest format (iframe) to embed their youtube videos. Android/Youtube Team, please take a look at this problem.
Android browsers are utterly buggy what comes to video playback and embedding. It simply does not work across devices. Trying to get it working is just waste of your time. My suggestion is that you don't try to include <iframe> but simply provide a thumbnail of the video which directly links to YouTube page or h264 file.
Earlier discussion, with a possible solution.
Google Reader-esque optimizing of WebViews on Android
If you want to play videos within your WebView you NEED to load the data with a base URL!
DONT do this:
mContentWebView.loadDataWithBaseURL(null, webViewContentString,
"text/html", "UTF-8", null);
DO THIS INSTEAD:
//veryVeryVery important for playing the videos!
mContentWebView.loadDataWithBaseURL(theBaseUrl, webViewConentString,
"text/html", "UTF-8", null);
The Base URL will be the something like the "original" url of what you are displaying in your WebView. So let's say you are making a news reader, the WebView's base url will be the url of the original story.
Good Luck!
Also remember to set up your WebView...Like so...
mContentWebView.setWebChromeClient(new WebChromeClient());
mContentWebView.getSettings().setPluginState(WebSettings.PluginState.ON);
mContentWebView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
mContentWebView.setWebViewClient(new WebViewClient());
mContentWebView.getSettings().setJavaScriptEnabled(true);
You need to have hardware acceleration turned on in the Manifest (only available on SDK 14 and above).
Ex. Hardware Acceleration On:
<application
android:name="com.example.app"
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppTheme"
android:hardwareAccelerated="true">
<!-- hardwareAccelerated requires SDK 14 -->
...
</application>
HTML5 Video support
In order to support inline HTML5 video in your application, you need to have hardware acceleration turned on, and set a WebChromeClient.
http://developer.android.com/reference/android/webkit/WebView.html
(Hope it help someone)
This worked for me- the code opens youtube site and can play its videos inside WebView:
mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
String frameVideo = "<html><body>Youtube video .. <br> <iframe width=\"320\" height=\"315\" src=\"https://www.youtube.com/\" frameborder=\"0\" allowfullscreen></iframe></body></html>";
mWebView.loadData(frameVideo, "text/html", "utf-8");
mWebView.loadUrl("http://www.youtube.com/");
mWebView.setWebViewClient(new WebViewClient());
I would suggest using some code to detect the environment of the user... use the iframe code only for ios devices (iphone, ipod, ipad) and use the old code for everyone else.
This Code made exactly fit to different device
webView.setInitialScale(1);
webView.setWebChromeClient(new WebChromeClient());
webView.getSettings().setAllowFileAccess(true);
webView.getSettings().setPluginState(WebSettings.PluginState.ON);
webView.getSettings().setPluginState(WebSettings.PluginState.ON_DEMAND);
webView.setWebViewClient(new WebViewClient());
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
int height = displaymetrics.heightPixels;
int width = displaymetrics.widthPixels;
Log.e(SimpleBillsConstants.SIMPLE_BILLS, width + "-" + height);
String data_html = "<!DOCTYPE html><html> <head> <meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"target-densitydpi=high-dpi\" /> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> <link rel=\"stylesheet\" media=\"screen and (-webkit-device-pixel-ratio:1.5)\" href=\"hdpi.css\" /></head> <body style=\"background:black;margin:0 0 0 0; padding:0 0 0 0;\"> <iframe style=\"background:black;\" width=' "+width+"' height='"+height+"' src=\""+ VIDEO_URL+"\" frameborder=\"0\"></iframe> </body> </html> ";
webView.loadDataWithBaseURL("http://vimeo.com", data_html, "text/html", "UTF-8", null);