Geek Answers Handbook

Android transparent webview on top of videoview

I have an Ionic project where I want to display a video, and on top of it is the contents of the WebView WebView . To have a transparent WebView on top of the video image, in the plugin I use:

 webView.getView().setBackgroundColor(0x00000000); ((ViewGroup) webView.getView()).bringToFront();

VideoView initialized and added to FrameLayout as follows:

 FrameLayout containerView = (FrameLayout) cordova.getActivity().findViewById(1); if (containerView == null) { containerView = new FrameLayout(cordova.getActivity().getApplicationContext()); containerView.setId(1); containerView.setBackgroundColor(Color.BLACK); FrameLayout.LayoutParams containerLayoutParams = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT); cordova.getActivity().addContentView(containerView, containerLayoutParams); videoView = new VideoView(cordova.getActivity()); videoView.setLayoutParams(new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT)); containerView.addView(videoView); MediaPlayer player = new MediaPlayer(); player.setOnPreparedListener(this); player.setOnCompletionListener(this); player.setOnErrorListener(this); final SurfaceHolder holder = videoView.getHolder(); holder.setKeepScreenOn(true); holder.addCallback(new SurfaceHolder.Callback() { @Override public void surfaceCreated(SurfaceHolder holder) { player.setDisplay(holder); try { player.prepare(); } catch (Exception e) { e.printStackTrace(); } } @Override public void surfaceDestroyed(SurfaceHolder holder) { player.release(); } @Override public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {} }); }

I tested this on Android 4.4.2 and it works great. Then I tested it on Android 5.1.1, and the WebView does not appear when the video is playing. But if I use Chrome to check it and hover <body> for example (then the screen displays a blue blue color), then the elements in the html content will appear. In addition, if I touch the screen, the content will suddenly appear. Therefore, it seems that this is a rendering problem when there is no interaction with WebView , but as soon as a touch or some kind of trigger appears, it appears.

I also tried using Crosswalk, and it still works fine on 4.2.2, but only works when starting the application on 5.1.1, and then after the first interaction it only works when you touch the screen

I also set <preference name="BackgroundColor" value="0xff000000"/> to config.xml , but that does not change the behavior.

Edit 1: I added a div with transparent text in it and drew a simple endless animation on it (this just changed the opacity from .9 to 1 ), and voila now the elements inside the WebView video will be displayed when playing. It is not perfect, because sometimes the WebView content “blinks”, but it works. Still don't know why, though

+8
android transparent webview videoview
source share
1 answer

Replace the code below.

 webView.setBackgroundColor(Color.TRANSPARENT);

If you want to add a webview over the video, use the app’s content layout and add a webview to it, as shown below.

 FramlayoutLayout layout = (FramlayoutLayout )cordova.getActivity() findViewById(android.R.id.content); layout.addview(your webview)
-one
source share

More articles:


All Articles