18

How do I remove the overlay play icon (triangle) that's visible in the center of the video for a second or so every time a video starts playing in an Android WebView?

Thanks in advance!

3
  • I'm using html5webview. For a complete compilable project, see surendra's answer in WebView and and HTML5 <video>. I'm testing on Android 4.1 Jelly Bean, Sony Xperia Tablet Z to be specific Aug 17, 2013 at 18:15
  • It's the same on Google Nexus 7 by Asus. Aug 20, 2013 at 8:30
  • If I understand correctly, simply adding a "poster" attribute pointing to a 1x1 transparent png file would do the trick :)
    – fakedob
    Oct 16, 2015 at 19:21

4 Answers 4

28

If you said about this picture enter image description here

This is picture I had when tested my app on Android 6.0.

You can hide this picture. For example:

WebView mWebView = (WebView) findViewById(R.id.web_view);
mWebView.setWebChromeClient(new WebChromeClientCustomPoster());

Chrome client class:

private class WebChromeClientCustomPoster extends WebChromeClient {

    @Override
    public Bitmap getDefaultVideoPoster() {
        return Bitmap.createBitmap(10, 10, Bitmap.Config.ARGB_8888);
    }
}

More info read api

3
  • Hi! I'm getting error when cast WebChromeClientCustomPoster class to WebChromeClient. WebView webView = (WebView)appView.getEngine().getView(); webView.setWebChromeClient(new WebChromeClientCustomPoster()); How can I solve this issue. Thanks for answers. Jan 5, 2017 at 8:49
  • i did the same but still issue is there. Not resolved issue. Jun 11, 2021 at 14:22
  • This is the import line needed: import android.graphics.Bitmap; Mar 2, 2022 at 16:57
10

I found a solution. Just add the 'poster' attribute.

e.g. poster="https://via.placeholder.com/1x1" or poster="noposter"

Note: Empty value are ignored. (poster="")

2

Please note that setting poster to an invalid URL (such as "noposter") might trigger a network call and an error event from the video player.

In my projects, I'm setting the poster to a tiny transparent GIF:

poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

1
  • This is exactly the best answer. It worked for me
    – Chor
    Aug 23 at 8:10
1

Neither poster="noposter" nor poster="null" work for me.

I made it work by creating a placeholder image that has just a white background color and assigned it to the video per DOM.

document.getElementById("myVideo").poster = "noposter.png";

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.