I manage to show and play a video using HTML in WebView by loading the following HTML:
String html = "<!DOCTYPE html>\n"+
"<html><head><title></title><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"><script type=\"text/javascript\"></script></head>\n" +
"<body style=\"margin: 0; padding: 0;\"><div id=\"video\"><video id=\"vid\" height=\"180\" width=\"320\" poster controls><source src=\"http://d21dkag2w1645r.cloudfront.net/article_videos/fcce6da21f4a88ffff297a7af9769b4e50f070f8.mp4\" type=\"video/mp4\"></video></div></body></html>";
However, I cant get the video's poster image to load. I would expect this to be auto-loaded by the webview by getting the first frame of the video, but this does not seem to happen and my webview jsut shows a blank background with the controls. How can I get the webview to auto-load the poster image/first frame of the video and show it as a placeholder?
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 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?
I'm trying to put a little embedded youtube video in my app. The user needs to be able to fullscreen the video, but the webview's youtube player has no fullscreen button! Whhhaa…? I've searched around and found no solution. BTW, using the Google YouTube API is NOT an option. I have a workaround (video thumbnail which opens a fullscreen WebView when clicked), but it would be a lot simpler/more elegant if the webview would handle this for me.
Here's how I'm loading the youtube video
String htmlString = "<html><body style='margin:0px auto; padding:0px; width: 100%;'><script type='text/javascript' src='http://m.youtube.com/iframe_api'></script><div style=\"padding-bottom: 56.25%;position: relative;\"><iframe allowfullscreen='allowfullscreen' id='playerId' type='text/html' style=\"width: 100%; height: 100%; position: absolute;\" width=\"560\" height=\"315\" src='http://www.youtube.com/embed/IwfUnkBfdZ4?enablejsapi=1&rel=0&playsinline=0&autoplay=0' frameborder='0'></div></body></html>";
if (youtubeWebView == null){
youtubeWebView = ButterKnife.findById(view, R.id.youtubeWebview);
}
youtubeWebView.getSettings().setJavaScriptEnabled(true);
youtubeWebView.getSettings().setLoadWithOverviewMode(true);
youtubeWebView.loadData(htmlString, "text/html", null);
I've seen this question a couple of times before but with no answers.
I have a Android app with a WebView. I load a HTML from a web service. Inside this HTML there are text, links and images.
Text and links are working but despite almost all images are well displayed there are some of them that show a blue quare instead of the image.
I've put a trace in my code:
Log.d("", "_htmlfrombackend="+_htmlfrombackend);
webView.loadDataWithBaseURL("", _htmlfrombackend, "text/html", "UTF-8", "");
And this is the output:
_htmlfrombackend=<p>text text text... <img width="200" height="300" alt="" src="http://www.mysamplesite.com/mysampleimage.jpeg" style="width: 200px; height: 300px;" />...text text</p>
That image is shown as a blue square. This is a screenshot:
So now I tried this:
String _newHtml = "<img width=\"200\" height=\"300\" alt=\"\" src=\"http://www.mysamplesite.com/mysampleimage.jpeg\" style=\"width: 200px; height: 300px;\" />"+_htmlfrombackend;
webView.loadDataWithBaseURL("", _newHtml, "text/html", "UTF-8", "");
And my webview shows this:
The first image is displayed well, the second one displays a blue square yet but they have the same img tag!
I've tried wrapping the html code between html and body tags but the results are the same.
This happens in Android 4.0, 4.4 and 5.0.
Anyone could have any idea of why my hardcoded image is shown correctly but the one from the backend is not?
Kind regards!
Edited to be more clear.
Edit: I've added images.
New EDIT: I've keep searching for a solution. I've had a deep reading of the HTML I receive and it's correctly formed, not malformed tags, just one strange thing, each img tag is inside a h2 tag, I mean:
<h2><img .../></h2>
But I tried to add these tags in my example with no difference:
String _newHtml = "<h2><img width=\"200\" height=\"300\" alt=\"\" src=\"http://www.mysamplesite.com/mysampleimage.jpeg\" style=\"width: 200px; height: 300px;\" /></h2>"+_htmlfrombackend;
webView.loadDataWithBaseURL("", _newHtml, "text/html", "UTF-8", "");
My image is still displayed while the image received don't.
New EDIT: I'm still looking for a solution, but I have a new clue. I've tried to show a wrong image:
String _newHtml = "<img width=\"200\" height=\"300\" alt=\"\" src=\"http://asdafsqwe\" style=\"width: 200px; height: 300px;\" />"+_htmlfrombackend;
webView.loadDataWithBaseURL("", _newHtml, "text/html", "UTF-8", "");
And my screen shows this:
As you can see, there is a square with a broken-image icon inside. This makes me think that the blue squares don't mean that there is a problem getting the image, there should be any other kind of problem.
In the HTML code img tag try src=new File( url ).toURI() for local files.
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);