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

Question

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

dok*_*ebi 11 android android-webview html5-video

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

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

我把它归结为一个简单的测试项目,我在github上发布了这个项目.

左侧的灰色区域是列表视图所属的位置.FrameLayout为简单起见,我将其更改为空. 沿web视图的右侧的切断部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>

Run Code Online (Sandbox Code Playgroud)

主要布局文件:

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Mar*_*vre 1

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

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

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

归档时间：	13 年，3 月前
查看次数：	3221 次
最近记录：	11 年，8 月前