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

possible duplicate of http://stackoverflow.com/questions/18271991/html5-video-remove-overlay-play-icon — Sumit Gulati, Apr 08 '17 at 03:11
Have you found a solution to this? I have been searching for hours :/ — SeanAye, Aug 30 '20 at 02:43

score 1 · Answer 1 · answered Aug 10 '22 at 16:00

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>

Android webview displays ugly button before playing HTML5 video

1 Answers1