Android WebView gray play button

Question

I am using the HTML5 video element for playing video in the Android WebView. And this works great for me but the only problem with using this is that the video element automatically a gray play button adds. I've tried searching for an API and could not find anything that helps my case. I also tried using CSS with the following style:

video.mobile_controls::-webkit-media-controls-fullscreen-button 
{
    display: inline !important; // Also used "display:none"
}

Further i tried poking in the shadow dom but i couldn't find anything related to this.

So the question is how do i remove this gray button. Here is an image for reference:

Answer 1

The issue is the video poster. But there's a better way of fixing this by extending from the WebChromeClient and overriding the getDefaultVideoPoster();

Here is the solution:

import android.graphics.Bitmap;
import android.webkit.WebChromeClient;

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

And then using this client instead by doing:

WebChromeClientCustomPoster chromeClient = new WebChromeClientCustomPoster();
mWebView.setWebChromeClient(chromeClient);

After some dirty hacks we found that misusing the poster attribute fixed this issue. We resolved this issue by doing the following:

videoElement.setAttribute("poster", "nope");

The video element will use the value "nope" as its poster. And because nope is not a valid URL the video element will not replace the poster and will not show a poster.