2024-01-09

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

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

我把它归结为一个简单的测试项目,我已经发布了在 github 上 https://github.com/dokkaebi/android-webview-video-test/.

这里有一个截屏: http://d.pr/i/dfEh http://d.pr/i/dfEh.

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

我尝试过的一些事情:

  • 用其他东西替换列表视图
  • 启用和禁用WebSettings:javascript,使用宽视口,以概览模式加载
  • set a WebViewClient and a 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>

In 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;

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


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

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

随机推荐