Ho un'applicazione per tablet con un layout diviso: un elenco a sinistra e un riquadro di dettagli a destra. Il riquadro a destra è una WebView e contiene un tag <video>. Funziona tutto bene, tranne che l'intero lato destro di WebView è tagliato e reso di un semplice bianco.WebView a schermo parziale con <video> tagliato a metà
Perché è il rendering in questo modo, e come posso evitarlo senza inserire un enorme hack?
L'ho ridotto a un semplice progetto di test, che ho pubblicato on github.
Ecco un screenshot: http://d.pr/i/dfEh.
L'area grigia sulla sinistra è il punto in cui appartiene la vista elenco. L'ho modificato in un FrameLayout vuoto per semplicità. La parte tagliata lungo il lato destro di WebView IS ha la stessa larghezza della visualizzazione elenco. Vale anche la pena notare che qualsiasi contenuto sotto il video viene troncato - l'area bianca estende l'intera altezza di WebView.
alcune cose che ho provato:
- sostituire la visualizzazione elenco con qualcos'altro
- attivare e disattivare
WebSettings: javascript, largo uso viewport, carico con modalità panoramica - impostare un
WebViewClienteWebChromeClient - Accensione e spegnimento dell'accensione hardware
- vari setti NGS in
View.setScrollBarStyle,WebView.setVerticalScrollBarOverlay, e simili - tweak
- vari dispositivi l'altezza/attributi di larghezza e stili
- vari formati video, tra cui MP4 con H264 e AAC, M3U8
<video>'s, e un flusso RTSP youtube, tra cui Fuoco HD mostrato, un Nexus 7, un Galaxy 10.1, ed un Xoom - le versioni di Android 3.1, 3.2, 4.0, 4,1
soluzione attuale:
Ho finito per aggirare questo problema utilizzando una visualizzazione Web a schermo intero, sovrapponendo la mia visualizzazione elenco su di essa e impostando un margine sinistro sull'elemento contenitore più esterno nel html. Questo è piuttosto hacky, e ottenere la dimensione della visualizzazione elenco su varie densità e risoluzioni è soggetta a errori, quindi mi piacerebbe davvero risolvere questo nel modo giusto.
Snippets:
Come ho già detto, una (non) lavoro banco di prova è pubblicato su GitHub, ma qui ci sono i pezzi importanti:
Html caricato nella WebView (questo è tutto esso):
<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>
Il file di layout principale:
<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;
Sono davvero graffiare la mia testa su questo uno, e sono sorpreso che non sono stato in grado di trovare qualsiasi menzione di esso. Qualsiasi input è apprezzato, per quanto inverosimile.
Hai considerato di utilizzare una sovrapposizione VideoView invece di incorporare un video nella visualizzazione Web? – Phil
Se il video sul Webview è come una VideoView, sarà su una superficie, che può essere solo una, quindi hai provato a disattivare l'accelerazione dell'hardware di ListView. –
@nininho: Sembra promettente. Ho provato a impostare 'view.setLayerType (View.LAYER_TYPE_SOFTWARE, null);' nel frammento di lista 'onCreateView', ma non ci sono cambiamenti. Con o senza quella chiamata, una chiamata a 'getLayerType' risulta in' LAYER_TYPE_NONE' sia nella lista che nelle viste web. C'è un altro modo per richiedere un livello software?Disattivare l'accelerazione a livello di applicazione corregge il problema del layout, ma ovviamente causa la mancata visualizzazione del video. – dokkaebi