WebView de tela parcial com <video> cortado ao meio

Question

Oct 26, 2012, 06:08 AM

WebView de tela parcial com <video> cortado ao meio

Eu tenho um aplicativo tablet com um layout dividido - uma lista à esquerda e um painel de detalhes à direita. O painel direito é um WebView e contém um<video> tag. Tudo isso está funcionando bem, exceto que todo o lado direito do WebView é cortado e renderizado em branco.

Por que isso está sendo processado dessa maneira e como posso evitá-lo sem inserir um grande hack?

Eu reduzi a um projeto de teste simples, que eu publiqueino github.

Aqui está umscreenshot: http://d.pr/i/dfEh.

A área cinza ao longo da esquerda é onde a exibição de lista pertence. Eu mudei para um vazioFrameLayout Pela simplicidade.A parte cortada ao longo do lado direito do WebViewÉ a mesma largura que a exibição de lista. É importante notar também que qualquer conteúdo abaixo do vídeo também é cortado - a área branca estende a altura total do WebView.

Algumas coisas que eu tentei:

substituir a exibição de lista por outra coisaativar e desativarWebSettings: javascript, use viewport amplo, carregue com o modo de visão geraldefinir umWebViewClient e umWebChromeClientativar e desativar a aceleração de hardwarevárias configurações emView.setScrollBarStyle, WebView.setVerticalScrollBarOverlaye semelhanteajustar o<video>atributos e estilos de altura / larguravários formatos de vídeo, incluindo mp4 com h264 e aac, m3u8 e um fluxo de rtsp do youtubevários dispositivos, incluindo o Fire HD mostrado, um Nexus 7, um Galaxy 10.1 e um XoomVersões Android 3.1, 3.2, 4.0, 4.1

Solução atual:

Acabei trabalhando em torno disso usando um WebView de tela inteira, sobrepondo minha visualização de lista sobre ela e definindo uma margem esquerda no elemento de contêiner mais externo no html. Isto é bastante hacky, e obter o tamanho da visualização de lista em várias densidades e resoluções é propenso a erros, então eu realmente gostaria de resolver isso da maneira correta.

Trechos:

Como eu mencionei, uma bancada de teste (não) está publicada no github, mas aqui estão os bits importantes:

Html carregado no WebView (isso é tudo):

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

O arquivo de layout 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>

EmonCreateView:

    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;

Eu estou realmente coçando minha cabeça por causa disso, e estou surpresa por não ter conseguido encontrar nenhuma menção a isso. Qualquer entrada é apreciada, por mais absurda que seja.