VideoView之上的android透明WebView答案

【问题标题】：android transparent WebView on top of VideoViewVideoView之上的android透明WebView
【发布时间】：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）

标签： android webview android-videoview transparent

【解决方案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，而不是自定义的，它已经添加到主内容视图中，所以我不确定这会改变什么