Pantalla web parcial de pantalla con <video> cortada por la mitad

Question

Oct 26, 2012, 06:08 AM

Pantalla web parcial de pantalla con <video> cortada por la mitad

Tengo una aplicación para tableta con un diseño dividido: una lista a la izquierda y un panel de detalles a la derecha. El panel de la derecha es una vista web, y contiene una<video> etiqueta. Todo funciona bien, excepto que todo el lado derecho de WebView está cortado y se vuelve blanco liso.

¿Por qué se está procesando de esta manera y cómo puedo evitarlo sin insertar un hack enorme?

Lo he reducido a un proyecto de prueba simple, que he publicadoen github.

Aquí hay uncaptura de pantalla: http://d.pr/i/dfEh.

El área gris a lo largo de la izquierda es donde pertenece la vista de lista. Lo he cambiado por un vacío.FrameLayout por simplicidad.La parte cortada a lo largo del lado derecho de la vista webES El mismo ancho que la vista de lista. También vale la pena señalar que cualquier contenido debajo del video también se corta: el área blanca se extiende a la altura completa de la vista web.

Algunas cosas que he intentado:

reemplazar la vista de lista con otra cosahabilitar y deshabilitarWebSettings: javascript, use la vista amplia, cargue con el modo de vista generalestablecer unWebViewClient y unWebChromeClientactivar y desactivar la aceleración de hardwarevarias configuraciones enView.setScrollBarStyle, WebView.setVerticalScrollBarOverlayy similarespellizcar el<video>Atributos y estilos de altura / anchura.Varios formatos de video, incluyendo mp4 con h264 y aac, m3u8, y un flujo rtsp de youtubevarios dispositivos, incluido el Fire HD mostrado, un Nexus 7, un Galaxy 10.1 y un XoomVersiones de Android 3.1, 3.2, 4.0, 4.1

Solución actual:

Terminé trabajando alrededor de esto usando una vista web a pantalla completa, superponiendo mi vista de lista encima de ella, y configurando un margen izquierdo en el elemento contenedor más externo en el html. Esto es bastante complicado, y obtener el tamaño de la vista de lista en varias densidades y resoluciones es propenso a errores, por lo que realmente me gustaría resolverlo de la manera correcta.

Fragmentos:

Como mencioné, un banco de pruebas (que no funciona) está publicado en github, pero aquí están los bits importantes:

HTML cargado en la vista web (esto es TODO):

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

El archivo de diseño principal:

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

EnonCreateView:

    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;

Realmente me estoy rascando la cabeza por esto, y me sorprende que no haya podido encontrar ninguna mención al respecto. Cualquier entrada es apreciada, sin embargo extravagante.