Question

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

为什么这样渲染，如何在不插入大量黑客的情况下避免使用它？

我把它归结为一个简单的测试项目，我发布了on github。

以下是屏幕截图：http://d.pr/i/dfEh。

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

我尝试过的一些事情：

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

目前的解决方法：

我最终解决了这个问题，使用了全屏WebView，将我的列表视图叠加在其上，并在html中最外层容器元素上设置了左边距。这是相当hacky，并且在各种密度和分辨率上获得列表视图的大小容易出错，所以我真的想以正确的方式解决这个问题。

片断：

正如我所提到的，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;

我真的在这个问题上摸不着头脑，我很惊讶我没有找到任何提及它。任何输入都是值得赞赏的，无论多么牵强。

Answer 1

问题似乎与硬件/ opengl层有关。由于VideoView使用硬件层来呈现视频，因此我认为带有视频的webView会发生同样的情况。

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

有关http://developer.android.com/guide/topics/graphics/hardware-accel.html#controlling

的硬件加速的更多信息

Answer 2

我有同样的问题，它必须与我使用相对布局。它呈现视频的图层不随webview移动。因此，它会将视频呈现为webview位于0,0。

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

它可能不干净，但我还没有找到另一种解决方案。

编辑：在更好地审视您的问题后，我认为它与相对布局没有任何关系，因为您没有使用它。不过，这种解决方法对我有用。所以我想无论你使用什么样的布局，'视频层'都会保持在0,0。顺便说一句，我只在Galaxy Tab 2（android 4.0.3）上遇到过这个问题。

Answer 3

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

webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

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

部分屏幕WebView与<video>切成两半</video>

3 个答案: