VideoView之上的android透明WebView
Posted
技术标签:
【中文标题】VideoView之上的android透明WebView【英文标题】:android transparent WebView on top of VideoView 【发布时间】:2017-08-04 06:46:54 【问题描述】:我有一个 Ionic 项目,我想在其中显示视频,并在其上显示 cordova WebView
的内容。要在视频视图顶部显示透明的WebView
,请在我使用的插件中:
webView.getView().setBackgroundColor(0x00000000);
((ViewGroup) webView.getView()).bringToFront();
VideoView
被初始化并添加到 FrameLayout
中,如下所示:
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)
);
我已经在 android 4.4.2 上对此进行了测试,效果很好。然后我在 Android 5.1.1 上对其进行了测试,在播放视频时,WebView
不可见。但是,如果我使用 Chrome 对其进行检查并将其悬停在 <body>
上(然后屏幕显示覆盖为蓝色),则会出现 html 内容中的元素。另外,如果我触摸屏幕,内容就会突然出现。因此,当与WebView
没有交互时,这似乎是一个渲染问题,但是一旦收到触摸或某种触发,它就会出现。
我也尝试过使用 Crosswalk,它在 4.2.2 上仍然可以正常工作,但仅在 5.1.1 上启动应用程序时有效,然后在第一次交互后它仅在触摸屏幕时有效
我还在config.xml
中设置了<preference name="BackgroundColor" value="0xff000000"/>
,但这不会改变行为。
编辑 1:
我添加了一个带有一些透明文本的 div,并在其上放置了一个简单的无限动画(只是将不透明度从.9
更改为1
),瞧WebView
中的元素现在出现在顶部播放时的视频。它并不完美,因为有时WebView
内容会“闪烁”,但它确实有效。仍然不知道为什么
【问题讨论】:
你有没有想过这个分层?我正在尝试做类似的事情并且无法找到示例。 不,最后我一直在css技术中使用animation
来触发webview的“重绘”(参见编辑1)
【参考方案1】:
用下面的代码替换。
webView.setBackgroundColor(Color.TRANSPARENT);
如果你想在视频视图之上添加 webview, 使用应用程序内容布局并在其中添加 webview,如下所示。
FramlayoutLayout layout = (FramlayoutLayout )cordova.getActivity() findViewById(android.R.id.content);
layout.addview(your webview)
【讨论】:
Color.TRANSPARENT
与0x00000000
相同,只是表示0
。我不确定layout.addview(your webview)
是什么意思,因为我使用的是默认的科尔多瓦WebView
,而不是自定义的,它已经添加到主内容视图中,所以我不确定这会改变什么
以上是关于VideoView之上的android透明WebView的主要内容,如果未能解决你的问题,请参考以下文章