Hide Native Android HTML5 Video Play Button

[seanaye]

video elements on android show an ugly grey play button before the video poster loads. I have searched everywhere for a solution to hide this button but I can't find one that works.

I have tried a shadow dom css solution suggested on stackoverflow. I can confirm this correctly applies to the element by using chrome remote debug and inspecting the shadow dom element. It shows display:none; but the button is still visible. Please see my gist (screenshot is wide, scroll to the right to see full image)

I have also read here you can override the standard capacitor webview to get rid of the button. I cant find any documentation on how to do this. I put the following in my MainActivity.java (not an android developer so not really sure what im doing here)

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // Initializes the Bridge
    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
      // Additional plugins you've installed go here
      // Ex: add(TotallyAwesomePlugin.class);
      add(CapacitorFirebaseAuth.class);
    }});
  }

 // REMOVE GREY PLAY BUTTON
  public static void enable(Bridge bridge) {
    bridge.getWebView().setWebViewClient(new BridgeWebViewClient(bridge) {
      @Override
      public Bitmap getDefaultVideoPoster() {
          return Bitmap.createBitmap(10, 10, Bitmap.Config.ARGB_8888);
      }
    });
  }
}

Please help me fix this I feel like it should be a simple fix but i have tried for days to no avail.

[simon-lanf]

@seanaye this fixes the problem with a transparent 1x1 transparent bitmap

import android.os.Bundle;
import android.graphics.Bitmap;
import android.graphics.Canvas;

import com.getcapacitor.BridgeActivity;
import com.getcapacitor.Plugin;
import com.getcapacitor.BridgeWebChromeClient;

import java.util.ArrayList;

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{

	}});

	this.getBridge().getWebView().setWebChromeClient(new BridgeWebChromeClient(bridge) {
		@Override
		public Bitmap getDefaultVideoPoster() {
			final Bitmap bitmap = Bitmap.createBitmap(1, 1, Bitmap.Config.ARGB_4444);
			Canvas canvas = new Canvas(bitmap);
			canvas.drawARGB(0, 0, 0, 0);
			return bitmap;
		}
	});
  }
}

[sburnicki]

With Capacitor 3 the following did the trick (based on @simon-lanf answer, thanks!):

public class MainActivity extends BridgeActivity {

  @Override
  public void onCreate(Bundle savedInstanceState) {
   ....
  }

  @Override
  public void onStart() {
    super.onStart();

    // disables the ugly default video tag poster image
    this.getBridge().getWebView().setWebChromeClient(new BridgeWebChromeClient(bridge) {
      @Override
      public Bitmap getDefaultVideoPoster() {
        return Bitmap.createBitmap(1, 1, Bitmap.Config.ARGB_8888);
      }
    });
  }
  }

[pzpsofficial]

Works well for capacitor 5, thanks for help!