Android webview displays ugly button before playing HTML5 video

Question

I have written a Javascript/HTML5 page which downloads and caches multiple short videos and starts playing them in a loop. However when I open this page by android webview (SKD ver 21) before start playing any video, for half a second it displays this ugly big play button and then starts playing the video. How can I practically get rid of this?

I already tried these, but no luck!

Android html5 video issue

Hide iPhone HTML5 video play button

Here is more info about the sdk version I am using

compileSdkVersion 21
    buildToolsVersion "21.1.2"
    defaultConfig {
        applicationId "com.example.aa.webview2"
        minSdkVersion 17
        targetSdkVersion 18

Answer 1

I used a dummy small transparent image as poster to get rid of this placeholder-

<video
  controls={false}
  autoPlay
  muted
  loop
  playsInline
  preload="auto"
  poster="https://cdn.indiawealth.in/public/images/transparent-background-mini.png"
>
  <source
    src="https://cdn.indiawealth.in/cdn/images/fe/mini_save_landing.mp4"
    type="video/mp4"
  />
</video>