Sunday 6 December 2020

How to display a Gyfcat iframe in an Android WebView

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:bad WebView1

Instead of using URLDecoder I also tried doing this:

val decoded = gifData.replace("&lt;", "<")
                      .replace("&gt;", ">")
                      .replace("&amp;", "&")

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:

enter image description here

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&amp;display_name=Gfycat&amp;url=https%3A%2F%2Fgfycat.com%2Fhalffeistyharlequinbug&amp;image=https%3A%2F%2Fthumbs.gfycat.com%2FHalfFeistyHarlequinbug-size_restricted.gif&amp;key=2aa3c4d5f3de4f5b9120b660ad850dc9&amp;type=text%2Fhtml&amp;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



from How to display a Gyfcat iframe in an Android WebView

No comments:

Post a Comment