2012-10-26 11 views
11

私は分割レイアウトのタブレットアプリケーションを持っています - 左側のリストと右側の詳細ペイン。右側のペインはWebViewで、<video>タグを含んでいます。 WebViewの右端全体が途切れて白くレンダリングされる点を除いて、これは問題なく機能します。部分画面WebView <video>を半分にカット

なぜこのようにレンダリングされていますか、巨大なハッキングを挿入しないで、どうやって回避できますか?

私はon githubを投稿した簡単なテストプロジェクトに煮詰めました。

ここにはのスクリーンショットhttp://d.pr/i/dfEhがあります。

左側の灰色の領域は、リストビューが属する場所です。わかりやすいように空のFrameLayoutに変更しました。 WebViewの右側に沿った切断部分ISリストビューと同じ幅。ビデオの下のコンテンツもカットされていることに注意してください。白い部分は、WebViewの全高を拡張します。私が試した

いくつかの点:

  • 何か他のもの
  • WebSettingsを有効または無効にして、リストビュー置き換える:JavaScriptを、ワイドビューポートを使用し、概要モードで負荷
  • WebViewClientを設定およびa WebChromeClient
  • ハードウェアアクセラレーションオン/オフ
  • さまざまなセットView.setScrollBarStyleでNGS、WebView.setVerticalScrollBarOverlay、及び同様の
  • <video>の高さ/幅属性とスタイルH264とAACとMP4、M3U8、及びユーチューブのRTSPストリームを含む
  • 様々なデバイス、を含む
  • 様々なビデオフォーマットを、微調整します火災HD示し、ネクサス7、ギャラクシー10.1、およびXoomの
  • Androidのバージョン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> 

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; 

私は本当にこの1の上に私の頭を悩まています、と私はそれの一切の言及を見つけることができませんでした驚いています。しかし、どんな入力も歓迎されます。

+0

ビデオをwebviewに埋め込むのではなく、VideoViewオーバーレイを使用することを検討しましたか? – Phil

+0

webview上のビデオがVideoViewのようなものなら、それはSurface上にあります。これは1つだけなので、ListViewハードウェアアクセラレーションをオフにしてみましたか? –

+0

@nininho:これは有望ですね。リストフラグメントの 'onCreateView'で' view.setLayerType(View.LAYER_TYPE_SOFTWARE、null); 'を設定しようとしましたが、変更はありません。その呼び出しの有無にかかわらず、 'getLayerType'を呼び出すと、リストビューとWebビューの両方で' LAYER_TYPE_NONE'が返されます。ソフトウェア層をリクエストする別の方法はありますか?アプリケーションレベルで加速をオフにすると、レイアウトの問題は解決されますが、もちろんビデオは表示されません。 – dokkaebi

答えて

1

問題は、ハードウェア/ OpenGLレイヤにあるようです。 VideoViewはハードウェアレイヤーを使用してビデオをレンダリングするので、ビデオ付きのWebViewでも同じことが起こると私は信じています。

レイヤーを正しく設定すると、それらは互いに干渉してはいけないので、私がコメントしたように、ListViewをレイヤーなしまたはソフトウェアに設定して、ハードウェアアクセラレーションを無効にし、 WebViewまたはウィンドウ。 http://developer.android.com/guide/topics/graphics/hardware-accel.html#controlling

1

でハードウェアアクセラレーションについて

詳細情報私はそれは相対的なレイアウトを使用して、私と一緒にいた、同じ問題を抱えていました。ビデオをレンダリングするレイヤーは、webviewと共に移動しません。したがって、Webビューが0,0に配置されているかのようにビデオをレンダリングします。

これを回避するには、実際に既に存在している可能性のあるコンポーネントの背後に、webviewを実際に0に配置します。次に、CSSでコンテンツに正しい位置にマージンを付けます。

クリーンではないかもしれませんが、別の解決策が見つかりませんでした。

編集:あなたの質問をよく見てから、私はそれがあなたが1つを使用していないので、相対レイアウトとは関係がないと思う。それにもかかわらず、この回避策は私のために働いた。だから私は、あなたが使用しているレイアウトに関係なく、0,0に 'ビデオレイヤー'とどまると思います。私はちょうどギャラクシータブ2(アンドロイド4.0.3)でこの問題に遭遇しました。

-1

マスター/詳細フローレイアウトで同じ問題が発生しました。レイヤータイプをソフトウェアに設定することで、ビデオが半分に削減されました。これにより、Webビューのハードウェアアクセラレーションがオフになります。

webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null); 

FYI私はAmazonタブレットでのみこの問題を経験しました。

関連する問題