带有 <video> 的部分屏幕 WebView 减半答案

【问题标题】：Partial-screen WebView with <video> cut in half带有 <video> 的部分屏幕 WebView 减半
【发布时间】：2012-10-16 08:15:56
【问题描述】：

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

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

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

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

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

我尝试过的一些事情：

用其他东西替换列表视图
启用和禁用WebSettings：javascript，使用宽视口，以概览模式加载
设置WebViewClient 和WebChromeClient
打开和关闭硬件加速
View.setScrollBarStyle、WebView.setVerticalScrollBarOverlay 等中的各种设置
调整<video> 的高度/宽度属性和样式
各种视频格式，包括带 h264 和 aac 的 mp4、m3u8 和 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;

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

【问题讨论】：

您是否考虑过使用 VideoView 叠加层而不是在 webview 中嵌入视频？
如果webview上的视频像VideoView，会在Surface上，只能是一个，那你有没有试过关闭ListView硬件加速。
@nininho ：这听起来很有希望。我尝试在列表片段的onCreateView 中设置view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);，但没有任何变化。无论有没有调用，对getLayerType 的调用都会在列表视图和Web 视图中产生LAYER_TYPE_NONE。是否有另一种方法来请求软件层？在应用程序级别关闭加速可以解决布局问题，但当然会导致视频不显示。
@Phil 是的，事实上效果很好。我有一个人为的要求来使用一些现有的网络代码。我可能会向它扔一些 javascript 来拦截 html 视频播放器上的状态更改，隐藏它，然后回调 Android 代码以启动 VideoView，但这对我来说就像做布局舞蹈一样笨拙和脆弱我'我目前在做。如果我可以删除或重写网络代码，那么您的将是正确的答案。
@f20k : 不幸的是，我从来没有想出比 css left margin hack 更好的东西。

标签： android android-webview html5-video

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

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

【讨论】：