我有一个具有拆分布局的平板电脑应用程序 - 左侧是列表,右侧是详细信息窗格。右侧窗格是一个 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;
我真的对这个问题摸不着头脑,我很惊讶我找不到任何提及它的内容。任何意见都会受到赞赏,无论多么牵强。