11

分割レイアウト (左側にリスト、右側に詳細ペイン) を持つタブレット アプリケーションがあります。右側のペインは WebView で、<video>タグが含まれています。WebView の右側全体が切り取られ、真っ白にレンダリングされることを除いて、すべて正常に機能しています。

このようにレンダリングされるのはなぜですか? また、巨大なハックを挿入せずにそれを回避するにはどうすればよいですか?

githubに投稿した単純なテスト プロジェクトに煮詰めました。

これがスクリーンショットです: http://d.pr/i/dfEh .

左側の灰色の領域は、リスト ビューが属する場所です。FrameLayout簡単 にするために空に変更しました。WebViewの右側に沿って切り取られた部分は、リスト ビューと同じ幅です。 また、ビデオの下のコンテンツも切り取られていることに注意してください。白い領域は、WebView の高さ全体に広がっています。

私が試したいくつかのこと：

  • リストビューを別のものに置き換える
  • 有効化と無効化WebSettings: JavaScript、ワイド ビューポートの使用、オーバービュー モードでの読み込み
  • WebViewClientaと a を設定するWebChromeClient
  • ハードウェア アクセラレーションのオンとオフを切り替える
  • View.setScrollBarStyle、WebView.setVerticalScrollBarOverlayなどのさまざまな設定
  • <video>の高さ/幅の属性とスタイルを微調整します
  • h264 と aac を使用した mp4、m3u8、YouTube rtsp ストリームなど、さまざまなビデオ形式
  • 表示されている Fire HD、Nexus 7、Galaxy 10.1、Xoom などのさまざまなデバイス
  • Android バージョン 3.1、3.2、4.0、4.1

現在の回避策:

全画面表示の WebView を使用し、その上にリスト ビューをオーバーレイし、html の最も外側のコンテナー要素に左マージンを設定することで、この問題を回避しました。これはかなりハックであり、さまざまな密度と解像度でリスト ビューのサイズを取得するとエラーが発生しやすくなるため、これを正しい方法で解決したいと考えています。

切れ端：

前述したように、(非) 動作中のテスト ベッドが github に投稿されていますが、重要な点は次のとおりです。

WebView に読み込まれた Html (これがすべてです):

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

私は本当にこれについて頭を悩ませています、そして私はそれについての言及を見つけることができなかったことに驚いています. どんな意見も歓迎しますが、とてつもないことでも構いません。

4

3 に答える 3

1

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

したがって、レイヤーを正しく設定すれば、それらは互いに干渉しないはずです。コメントで述べたように、ListViewをレイヤーなしまたはソフトウェアに設定して、ハードウェアアクセラレーションを無効にし、webViewまたはウィンドウで有効にする必要があります。 。

ハードウェアアクセラレーションの詳細については、http：//developer.android.com/guide/topics/graphics/hardware-accel.html#controllingをご覧ください。

于 2012-11-06T17:16:46.453 に答える
1

私は同じ問題を抱えていました。相対レイアウトを使用する必要がありました。ビデオをレンダリングするレイヤーは、webview と共に移動しません。したがって、webview が 0,0 に配置されているかのようにビデオをレンダリングします。

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

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

編集:あなたの質問をよく見てから、相対的なレイアウトを使用していないため、相対的なレイアウトとは何の関係もないと思います。それにもかかわらず、この回避策は私にとってはうまくいきました。したがって、使用しているレイアウトに関係なく、「ビデオレイヤー」は0,0のままだと思います。ちなみに、Galaxy Tab 2（android 4.0.3）でこの問題に遭遇しただけです。

于 2013-06-10T15:33:27.767 に答える
-1

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

webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

参考までに、この問題は Amazon タブレットでのみ発生しました。

于 2014-05-21T21:17:22.880 に答える