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");
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 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'm writing a media player for my android application using angularjs, I get the songs from web API, address: http://10.96.254.34:8885/api/apimusic/download?songId=X, with "X" is the id of the song I want to stream. You can try add "1", "2" or "3" at "X" to listen to the song.
My problem is, when I use write the code for the audio player:
<div class="item item-thumbnail-left">
<h2>{{song.SongName}}</h2>
<p>{{song.Singer}}</p>
<audio id="audio" autoplay="true" preload="auto" tabindex="0" controls="" type="audio/mpeg">
<source type="audio/mpeg" src="http://10.96.254.34:8885/api/apimusic/download?songId=1">
Sorry, your browser does not support HTML5 audio.
</audio>
</div>
The song can be fetched flawlessly, but when I change it to:
http://10.96.254.34:8885/api/apimusic/download?songId={{song.SongId}}, It doesn't work
Any ideas to help me out of this? Please help :(
Try to use in source:
data-ng-src
or
ng-src
instead of using a simple src.
Its because of Strict Contextual Escaping (SCE), which is by default enabled in Angularjs.
passing expression to url inside href or src is not allowed, so instead prepare your url with expression and then assign it to src. for ex:
Instead of
ng-src="http://yourdomain.com/a={{id}}"
do
in Controller:
$scope.url = "http://yourdomain.com/a="+$scope.id;
in View
ng-src="{{url}}"
And make sure of CORS issue as well. If you are calling audio url from different domain.
I have such HTML
<body>
<p>https://www.google.com</p>
<p>foo#bar.com</p>
</body>
Is there any way to tell WebView to auto linkify content, and render like if it was:
<body>
<p>https://www.google.com</p>
<p>foo#bar.com</p>
</body>
Short answer: No. WebView is a web browser, so it will render a html page. Your html page does not include links, so why would WebView alter it?
Long Answer: You can intercept the page loading using a WebViewClient then inject a javascript that linkifies the page. There are tons of JQuery-based scripts around. But mind that this method won't be bullet-proof and will depend on the loaded page structure. For something as simple as your example it will be very easy, but if you add HTML5 , dynamic content, Iframes, asynchronous content ... things start to get complicated.
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);