部分屏幕的WebView以＆lt;视频＆GT;切成两半 [英] Partial-screen WebView with <video> cut in half
问题描述
我有片剂应用了分流布局 - 在左边的列表，并且在右侧的细节窗格。右侧窗格是一个web视图，它包含一个＆LT;视频＆GT; 标记。这一切工作正常，除了web视图的整个右侧被切断，并呈现纯白色。
I have a tablet application with a split layout - a list on the left, and a detail pane on the right. The right-hand pane is a WebView, and it contains a <video> tag. That's all working fine, except the entire right-hand side of the WebView is cut off and renders plain white.
为什么会呈现这样，我怎么能避免它不插入一个庞大的黑客？
我已经煮它归结为一个简单的测试项目，我已经张贴在github
I have boiled it down to a simple test project, which I've posted on github.
下面是一个截图： http://d.pr/i/dfEh
沿左边的灰色区域是列表视图所属。我把它改成一个空的的FrameLayout 的简单性。 沿右侧的WebView 的切断部分的宽度相同的列表视图。的另外值得一提的是，下面的视频中的任何内容还削减off--白色区域延伸web视图的完整高度。
The grey area along the left is where the list view belongs. I have changed it to an empty FrameLayout for simplicity. The cut off portion along the right side of the WebView IS the same width as the list view. It's also worth noting that any content below the video is also cut off--the white area extends the full height of the WebView.
有些事情我已经试过：
- 用别的东西代替列表视图
- 启用和禁用
WebSettings：JavaScript中，使用宽视，负载概览模式 - 设置一个
WebViewClient和WebChromeClient - 在开和关转硬件加速 在
- 在各种设置，以及类似
- 捏捏
＆LT;视频＆GT;的高度/宽度属性和样式 - 在各种视频格式，包括MP4与H264和AAC，M3U8和YouTube的RTSP流的
- 的各种设备，包括消防高清所示，一台Nexus 7，银河10.1，和一个Xoom的
- 的Android版本3.1，3.2，4.0，4.1
View.setScrollBarStyle ， WebView.setVerticalScrollBarOverlay - replace the list view with something else
- enable and disable
WebSettings: javascript, use wide viewport, load with overview mode - set a
WebViewClientand aWebChromeClient - turn hardware acceleration on and off
- various settings in
View.setScrollBarStyle,WebView.setVerticalScrollBarOverlay, and similar - tweak the
<video>'s height/width attributes and styles - various video formats, including mp4 with h264 and aac, m3u8, and a youtube rtsp stream
- various devices, including the Fire HD shown, a Nexus 7, a Galaxy 10.1, and a Xoom
- Android versions 3.1, 3.2, 4.0, 4.1
目前的解决方法：
我结束了围绕这一工作通过一个全屏幕的WebView，覆盖在它上面我的列表视图，以及设置在HTML中的最外层容器元素的左边距。这是相当哈克，并获得各种密度和决议的列表视图的大小容易出错，所以我真的想解决这个问题的正确方法。
I ended up working around this by using a full-screen WebView, overlaying my list view on top of it, and setting a left margin on the outermost container element in the html. This is rather hacky, and getting the size of the list view on various densities and resolutions is error-prone, so I would really like to solve this the right way.
代码片段：
正如我所提到的，一个（非）工作测试台发布在github上，但这里有重要的位：
As I mentioned, a (non-) working test bed is posted on github, but here are the important bits:
的HTML加载到web视图（这是所有的话）：
Html loaded into the WebView (this is ALL of it):
<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>
主要布局文件：
The main layout file:
<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;
我真的抓我的头在这一块，我很惊讶，我一直没能找到任何提及。任何输入AP preciated，但牵强。
I am really scratching my head over this one, and I'm surprised I haven't been able to find any mention of it. Any input is appreciated, however far-fetched.
推荐答案
我有同样的问题，它必须使用一个相对布局我。该层它呈现视频，不与web视图移动。因此，它会呈现视频，如果web视图是位于0,0。
I had the same problem, it had to with me using a relative layout. The layer it renders the video to, does not move with the webview. So it will render the video as if the webview was positioned at 0,0.
您可以变通的作法是在0 0实际上定位的WebView，背后可能已经存在的任何组件。然后在CSS给内容保证金的正确位置定位。
You can work around this by actually position the webview at 0 0, behind any components that may already be there. Then in css give the content a margin to position it on the correct spot.
这可能不干净，但我还没有找到另外的解决方案。
It may not be clean, but I haven't found another solution.
编辑：服用后更好看你的问题，我认为它没有什么，因为你不使用一个相对布局做。不过，这种解决办法为我工作。所以我猜视频图层停留在0,0无论什么布局你使用。我只是顺便碰到上的Galaxy Tab 2（安卓4.0.3）这个问题。
After taking a better look at your question I think it doesn't have anything to do with the relative layout as you're not using one. Nevertheless this workaround worked for me. So I guess the 'Video layer' stays at 0,0 no matter what layout you're using. I only came across this problem on a Galaxy Tab 2(android 4.0.3) by the way.
这篇关于部分屏幕的WebView以＆lt;视频＆GT;切成两半的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
