Disable default ugly poster image in html5 video tag on android

Question

On android, using html5 video tag to load a video, before video loads, the placeholder image is a grayish image with a big "play" icon on it, suppose I don't have a poster image for the video so I couldn't replace it, is there any way I could disable the ugly one?

Danielledaniels

Answer 1

I know this question is old, but I was looking for the answer to this. It turns out that WebChromeClient has a getDefaultVideoPoster method. So you can do something like:

webView.setWebChromeClient(new WebChromeClient() {
    @Override public Bitmap getDefaultVideoPoster() {
        final Bitmap bitmap = Bitmap.createBitmap(1, 1, Bitmap.Config.RGB_565);
        Canvas canvas = new Canvas(bitmap);
        // Use whatever color you want here. You could probably use a transparent color
        canvas.drawARGB(255, 0, 0, 0);
        return bitmap;
    }
});

I wouldn't necessarily make new bitmaps for every possible time this method could be called, but I'm sure you get the idea.

Daune

canvas.drawARGB(255, 0, 0, 0); – Pontiac

one more suggestion: if you want this poster to be transparent, you should create Bitmap with alpha channel: Bitmap.createBitmap(1, 1, Bitmap.Config.ARGB_4444) – Broncho

Any chance to do this with pure CSS? – Incunabulum

this method is used when the video is not playing and you want to replace the element with poster image. – Vedis

Answer 2

You can add a poster attribute to your <video> tag to skip the ugly pixelated default android-webview-video-poster image. A transparent PNG or GIF or an empty SVG work.

Jaleesa

Answer 3

A workaround to "disable" the video poster in the web app code (not the Android navitve one) is setting a 1x1 transparent image. The smallest base64 encoded 1x1 transparent image seems to be a GIF, so this works:

<video poster="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />

Thunell