2012-10-26 1 views
11

왼쪽에 목록이 있고 오른쪽에 세부 정보 창이있는 분할 응용 프로그램이 있습니다. 오른쪽 창은 WebView이며 <video> 태그를 포함합니다. WebView의 오른쪽 전체가 잘리고 흰색이 렌더링된다는 점을 제외하고는 정상적으로 작동합니다.<video>으로 분할 된 부분 화면 WebView

이렇게 렌더링하는 이유는 무엇이며 거대한 핵을 삽입하지 않으면 어떻게 피할 수 있습니까?

간단한 테스트 프로젝트로 끝냈습니다.이 프로젝트는 on github으로 게시했습니다.

여기에 스크린 샷 : http://d.pr/i/dfEh입니다.

왼쪽의 회색 영역은 목록보기가 속한 곳입니다. 단순화를 위해 빈 FrameLayout으로 변경했습니다. WebView 오른쪽에있는 잘림 부분 IS 목록보기와 동일한 너비. 비디오 아래의 모든 콘텐츠도 잘리는 점에 유의해야합니다. 흰색 영역은 WebView의 전체 높이를 확장합니다.

어떤 것들은 나는 시도했다 : 자바 스크립트하는 WebViewClient을 설정

  • 개요 모드로 다양한 뷰포트, 부하를 사용

    • 활성화하고 WebSettings을 해제 다른 뭔가 목록보기를 교체 및 a WebChromeClient
    • 하드웨어 가속 켜기 및 끄기
    • 다양한 setti View.setScrollBarStyle에서 NGS, WebView.setVerticalScrollBarOverlay와 유사한
    • 가 포함 <video>의 H264 및 AAC, M3U8와 MP4 포함한 높이/폭 특성 및 스타일
    • 다양한 비디오 포맷, 및 유튜브 RTSP 스트림
    • 다양한 장치를 조정할 화재 HD 표시, 넥서스 7, 갤럭시 10.1과의 Xoom
    • 안드로이드 버전 3.1, 3.2, 4.0, 4.1

    현재 해결 방법 :

    전체 화면 WebView를 사용하여 목록보기를 겹쳐서 표시하고 HTML의 가장 바깥 쪽 컨테이너 요소에 왼쪽 여백을 설정하여 작업을 마쳤습니다. 이것은 오히려 해킹이며 다양한 밀도와 해상도에서 목록보기의 크기를 가져 오는 것은 오류가 발생하기 쉽기 때문에이 문제를 올바르게 해결하고 싶습니다.

    조각 :

    나는 (비) 작업 테스트 베드는 GitHub의에 게시 된, 그러나 여기에서 중요한 비트입니다되어, 언급 한 바와 같이 :

    html로이 중 ALL입니다 (웹보기에로드 그것은) :

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

    난 정말이 일을 통해 내 머리를 긁적하고, 나는 내가 그것의 어떤 언급을 찾을 수 없어 놀랐어요. 그러나 어떤 입력이라도 부끄럽지는 않습니다.

  • +0

    webview에 비디오를 포함하는 대신 VideoView 오버레이를 사용 해본 적이 있습니까? – Phil

    +0

    webview의 비디오가 VideoView와 같은 경우 Surface에만 표시 될 수 있습니다. 따라서 ListView 하드웨어 가속을 사용하지 마십시오. –

    +0

    @nininho : 이것은 유망한 것으로 들립니다. 나는리스트 조각의 onCreateView에서'view.setLayerType (View.LAYER_TYPE_SOFTWARE, null);'설정을 시도했지만 변경은 없다. 그 호출의 유무에 관계없이,'getLayerType'에 대한 호출은리스트와 웹 뷰 모두에서'LAYER_TYPE_NONE'을 리턴합니다. 소프트웨어 계층을 요청할 수있는 또 다른 방법이 있습니까?응용 프로그램 수준에서 가속을 끄면 레이아웃 문제가 해결되지만 비디오는 표시되지 않습니다. – dokkaebi

    답변

    1

    문제는 하드웨어/OpenGL 레이어에있는 것 같습니다. VideoView는 비디오를 렌더링하기 위해 하드웨어 레이어를 사용하기 때문에 비디오가있는 webView에서도 같은 결과가 발생한다고 생각합니다.

    그래서 레이어를 올바르게 설정하면 서로 간섭하지 않아야합니다. 따라서 내가 언급 한 것처럼 ListView를 레이어 없음 또는 소프트웨어로 설정하고 하드웨어 가속을 사용하지 않도록 설정하고 webView 또는 창. http://developer.android.com/guide/topics/graphics/hardware-accel.html#controlling

    1

    에서 하드웨어 가속에 대한

    자세한 정보는 나는 나를 상대 레이아웃을 사용하여와로했다, 같은 문제가 있었다. 동영상을 렌더링하는 레이어는 웹보기와 함께 움직이지 않습니다. 따라서 웹 뷰가 0,0에 위치하는 것처럼 비디오를 렌더링합니다.

    이미 존재할 수있는 구성 요소 뒤에 실제로 웹 뷰를 배치하여이 문제를 해결할 수 있습니다. 그런 다음 CSS에서 올바른 위치에 내용을 배치 할 여백을 지정하십시오.

    깨끗한 것은 아니지만 다른 해결책을 찾지 못했습니다.

    편집 : 귀하의 질문을 잘 살펴 본 후에는 상대적인 레이아웃과 관련이 없다고 생각합니다. 그럼에도 불구하고이 해결 방법은 나를 위해 일했습니다. 그래서 '비디오 레이어'는 레이아웃이 0,0에 상관없이 사용하고있는 것 같습니다. 나는 단지이 문제를 Galaxy Tab 2 (안드로이드 4.0.3)에서 만났다.

    -1

    마스터/세부 흐름 레이아웃에서 동일한 문제가있었습니다. 계층 유형을 소프트웨어로 설정하면 비디오가 절반으로 줄었습니다. 그러면 웹보기의 하드웨어 가속이 해제됩니다.

    webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null); 
    

    참고이 문제는 Amazon Tablets에서만 발생했습니다.