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.
Related
I don't know much about html but there is a small issue and I am unable to find its solution.
This is the iframe that I want to display on static html page:
<!DOCTYPE html>
<html>
<body>
<iframe style="width:120px;height:240px; padding-right:50px; padding-bottom:50px" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=US&source=ac&ref=qf_sp_asin_til&ad_type=product_link&tracking_id=qstore51214-20&marketplace=amazon®ion=US&placement=0553496670&asins=0553496670&linkId=4f9912a00b832e2f8bcb5a9b187511cf&show_border=true&link_opens_in_new_window=true&price_color=333333&title_color=0066c0&bg_color=ffffff">
</iframe>
</body>
</html>
When I add this to html and try to open html page, I get the error:
"File not found".
But when I add this iframe to any live html editor it work perfectly and show the link.
Actually I want to display this iframe in Webview in my Andriod application.
My android code is:
mWebViewTopSeller = (WebView) findViewById(R.id.webViewTopSeller);
mWebViewTopSeller.setWebChromeClient(new WebChromeClient());
mWebViewTopSeller.setWebViewClient(new WebViewClient());
mWebViewTopSeller.getSettings().setJavaScriptEnabled(true);
mWebViewTopSeller.loadUrl("file:///android_asset/TopSeller.html");
Please help. Thanks!
When embedding this iframe, it returns an error:
SEC7111: HTTPS security is compromised by https://ws-na...
So it may have something to do with the browser's mixed-content/same-origin policy.
Possible src values are an absolute URL that points to another web site (like src="http://www.example.com/default.htm")
or an relative URL that points to a file within a web site (like src="default.htm" I think your src path is wrong.
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?
Currently I'm working on news reader android app, and show article in webview, I have some issues when displaying embedded video from youtube, my WYSIWYG generate code below
<iframe height="360" width="640" src="//www.youtube.com/embed/PS6JupCFnNM" frameborder="0" allowfullscreen></iframe>
but it cannot load in webview, then I found something to fixed this problem, with adding http/https in src url like
<iframe width="560" height="315" src="https://www.youtube.com/embed/PS6JupCFnNM" frameborder="0" allowfullscreen></iframe>
the second format is original from youtube embed box that I copied from there, and it work, now what I supposed to do, is there a way to make webview show the youtube video with src="//www.youtube.com/embed/PS6JupCFnNM" format or I must modification my WYSIWYG instead?
thanks for your help. I hope my question does not duplicate with another webview question.
You have to use base url.
webView.loadDataWithBaseURL("http://.", htmlCode, TEXT_HTML, "UTF-8", "");
Switch to loadDataWithBaseURL(), where the base URL that you provide has the https scheme.
i was done by adding utf-8 encoding.
like that:
webview.loadData(html,"text/html", "utf-8");
I am trying to show some basic html elements in a webview. I can do it with load datawithbaseurl method. But is there any way to check if content loaded correctly ?
Here is my html code coming from webservice.
<div style="float:left;margin:0;padding:0;top:0;bottom:0"><img src="http://exam.exam.com/upload/images/Activities/poskbhov.jpg" alt="" /></div>
and my webview code :
webView.loadDataWithBaseURL("", content.Content, "text/html", "UTF-8", "");
I just want to show an image. But i want to make sure its loaded. Right now i dont have an image. WebView just shows an img object in a div right now. I would like to put this image can not shown alert.
To link an image, build an String (HTML format) and code an IMG element:
String htmlContent = "<HTML>.....<img id=\"main_image\" src=yourImage.png alt=\"\"></br>.....</HTML>");
Load the content telling the webView were your resources are, and put your IMG in your "assets" folder with the name "yourImage.png"
webView.loadDataWithBaseURL("file:///android_asset/", htmlContent, "text/html", "utf-8", null);
You can also Link css file from here too!
If you want to see a full example, take a look to this project:
https://github.com/matessoftwaresolutions/AndroidHttpRestService
It consists on an HTTPService and, in the class HttpServiceFragment you can see a full (specific) implementation.
I hope it helps!!!
So I've searched around on SO a fair bit today and have made significant progress, but now I'm having an issue that I haven't seen pop up anywhere. I've embedded a YouTube video into an HTML file using an iframe as such:
<body>
<div align="center">
<iframe class="youtube-player" type="text/html" width="480" height="320"
src="http://www.youtube.com/embed/9DNAyD4ll6E?html5=1" frameborder="0">
</div>
</body>
and I'm displaying it in a WebView that I'm modifying in my activity like so:
WebView welcomeWebView = (WebView) findViewById(R.id.welcomeVideo);
welcomeWebView.setHorizontalScrollBarEnabled(false);
welcomeWebView.setVerticalScrollBarEnabled(false);
welcomeWebView.getSettings().setJavaScriptEnabled(true);
welcomeWebView.loadUrl("file:///android_asset/welcome.html");
The issue I'm having is that the still image display and controls show up, but when I click on play I'm presented with a gray screen that has a film strip and play icon in it. Here's the screen shots for the before/after for hitting play
http://www.ptrprograms.com/youtubeapp.png
http://www.ptrprograms.com/youtubeapp2.png
If anyone has seen this before or can point me in the right direction for displaying a video, I'd really appreciate it. Thank you!
EDIT: I also know that I can just use an intent to open it in a YouTube app, but my client (a non-profit that I'm donating this app to) is pretty specific about wanting it embedded into a page where we can have a textview with more information below it.
So I ditched the external asset for the webview and instead decided to load it in the activity itself, and it seems to work a lot better (it actually runs :))
WebView webView = (WebView) findViewById(R.id.welcomeVideo);
String play= "<html><body><div align=\"center\"> <iframe class=\"youtube-player\" type=\"text/html\" width=\"480\" height=\"320\" src=\"http://www.youtube.com/embed/9DNAyD4ll6E?rel=0\" frameborder=\"0\"></div></body></html>";
webView.setWebChromeClient(new WebChromeClient() {
});
webView.getSettings().setJavaScriptEnabled(true);
webView.loadData(play, "text/html", "utf-8");
webView.setBackgroundColor(0x00000000);