11

我有一个具有拆分布局的平板电脑应用程序 - 左侧是列表，右侧是详细信息窗格。右侧窗格是一个 WebView，它包含一个<video>标签。这一切都很好，除了 WebView 的整个右侧被切断并呈现纯白色。

为什么它会以这种方式呈现，以及如何在不插入大量黑客的情况下避免它？

我把它归结为一个简单的测试项目，我已经发布在 github 上。

这是一个截图：http ://d.pr/i/dfEh 。

左侧的灰色区域是列表视图所属的位置。为简单起见，我已将其更改为空FrameLayout。 WebView右侧的截断部分与列表视图的宽度相同。 还值得注意的是，视频下方的任何内容也被截断了——白色区域延伸了 WebView 的整个高度。

我尝试过的一些事情：

  • 用其他东西替换列表视图
  • 启用和禁用WebSettings：javascript，使用宽视口，以概览模式加载
  • 设置一个WebViewClient和一个WebChromeClient
  • 打开和关闭硬件加速
  • View.setScrollBarStyle,WebView.setVerticalScrollBarOverlay和类似中的各种设置
  • 调整<video>的高度/宽度属性和样式
  • 各种视频格式，包括带 h264 和 aac 的 mp4、m3u8 和 youtube rtsp 流
  • 各种设备，包括所示的 Fire HD、Nexus 7、Galaxy 10.1 和 Xoom
  • 安卓版本 3.1、3.2、4.0、4.1

当前解决方法：

我最终通过使用全屏 WebView 解决了这个问题，将我的列表视图覆盖在它上面，并在 html 中最外层的容器元素上设置了左边距。这很麻烦，并且在各种密度和分辨率上获取列表视图的大小很容易出错，所以我真的很想以正确的方式解决这个问题。

片段：

正如我所提到的，在 github 上发布了一个（非）工作测试平台，但这里有一些重要的部分：

Html 加载到 WebView 中（这就是全部）：

<html>
<head><title>Title</title></head>
<body style="margin:0">
    <video x-webkit-airplay="allow" controls="controls" style="width:100%">
        <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"></source>
    </video>
</body>
</html>

主布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <fragment android:name="com.concentricsky.android.webviewvideotest.ListFragment"
        android:id="@+id/item_list"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <!-- The WebView is attached here -->
    <FrameLayout android:id="@+id/detail_container"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3" />

</LinearLayout>

在onCreateView：

    View rootView = inflater.inflate(R.layout.fragment_detail, container, false);
    webView = (WebView) rootView.findViewById(R.id.webview);
    webView.setWebChromeClient(new WebChromeClient());
    webView.loadUrl("file:///android_asset/test.html");
    return rootView;

我真的为这个问题摸不着头脑，我很惊讶我找不到任何提及它的内容。任何意见都值得赞赏，无论多么牵强。

4

3 回答 3

1

问题似乎出在硬件/opengl 层上。由于 VideoView 使用硬件层来渲染视频，我相信带有视频的 webView 也会发生同样的情况。

因此，如果您将图层设置正确，它们不应该相互干扰，所以就像我在评论中所说的那样，您应该将 ListView 设置为无图层或软件，以禁用硬件加速并在 webView 或窗口上启用它.

有关硬件加速的更多信息，请访问http://developer.android.com/guide/topics/graphics/hardware-accel.html#controlling

于 2012-11-06T17:16:46.453 回答
1

我有同样的问题，它必须与我使用相对布局。将视频渲染到的图层不随 webview 移动。所以它将渲染视频，就好像 webview 定位在 0,0。

您可以通过将 webview 实际定位在 0 0 来解决此问题，在可能已经存在的任何组件后面。然后在 css 中给内容一个边距以将其放置在正确的位置。

它可能不干净，但我还没有找到其他解决方案。

编辑：在仔细查看您的问题后，我认为它与相对布局没有任何关系，因为您没有使用它。不过，这种解决方法对我有用。所以我猜无论你使用什么布局，“视频层”都保持在 0,0。顺便说一句，我只在 Galaxy Tab 2(android 4.0.3) 上遇到过这个问题。

于 2013-06-10T15:33:27.767 回答
-1

我在主/详细流布局中遇到了同样的问题。通过将图层类型设置为软件，我的视频被切成两半的问题就消失了。这将关闭 webview 的硬件加速。

webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

仅供参考，我只在亚马逊平板电脑上遇到过这个问题。

于 2014-05-21T21:17:22.880 回答