Tôi có ứng dụng máy tính bảng có bố cục phân tách - danh sách ở bên trái và ngăn chi tiết ở bên phải. Khung bên phải là một WebView và nó chứa một thẻ <video>. Đó là tất cả làm việc tốt, ngoại trừ toàn bộ bên phải của WebView được cắt bỏ và làm cho màu trắng đồng bằng.WebView một phần màn hình với <video> được cắt thành một nửa
Tại sao nó hiển thị theo cách này và làm thế nào tôi có thể tránh nó mà không chèn một hack lớn?
Tôi đã đun sôi nó xuống một dự án thử nghiệm đơn giản, mà tôi đã đăng on github.
Đây là ảnh chụp màn hình: http://d.pr/i/dfEh.
Khu vực màu xám ở bên trái là nơi chế độ xem danh sách thuộc về. Tôi đã đổi nó thành một số trống FrameLayout để đơn giản. Phần cắt ngang dọc theo bên phải của WebView IS cùng chiều rộng với chế độ xem danh sách. Cũng đáng lưu ý rằng mọi nội dung bên dưới video cũng bị cắt - vùng trắng mở rộng chiều cao đầy đủ của WebView.
Một số điều tôi đã cố gắng:
- thay thế xem danh sách với cái gì khác
- kích hoạt và vô hiệu hóa
WebSettings: javascript, sử dụng khung nhìn rộng, tải với chế độ tổng quan - thiết lập một
WebViewClientvàWebChromeClient - bật và tắt tăng tốc phần cứng
- các thiết lập khác nhau NGS trong
View.setScrollBarStyle,WebView.setVerticalScrollBarOverlay, và tương tự - tinh chỉnh
- thiết bị khác nhau chiều cao/thuộc tính chiều rộng và phong cách
- các định dạng video khác nhau, bao gồm mp4 với h264 và aac, M3U8 's
<video>, và một dòng rtsp youtube, bao gồm Fire HD cho thấy, Nexus 7, một Galaxy 10.1 và Xoom - phiên bản Android 3.1, 3.2, 4.0, 4,1
workaround hiện tại:
0.123.Tôi đã kết thúc làm việc này bằng cách sử dụng WebView toàn màn hình, phủ lên chế độ xem danh sách của tôi trên đầu trang và đặt lề trái trên phần tử vùng chứa ngoài cùng trong html. Điều này là khá hacky, và nhận được kích thước của danh sách xem trên mật độ khác nhau và độ phân giải là dễ bị lỗi, vì vậy tôi thực sự muốn giải quyết điều này đúng cách.
Snippets:
Như tôi đã đề cập, một (không) giường kiểm tra làm việc được đăng tải trên github, nhưng ở đây là các bước quan trọng:
Html nạp vào WebView (đây là TẤT CẢ nó):
<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>
Các chính bố trí tập tin:
<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>
Trong 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;
Tôi thực sự gãi đầu của tôi trên thế này, và tôi ngạc nhiên tôi đã không thể tìm thấy bất kỳ đề cập đến nó. Bất kỳ đầu vào nào được đánh giá cao, tuy nhiên được tìm nạp nhiều.
Bạn đã cân nhắc sử dụng lớp phủ VideoView thay vì nhúng video vào chế độ xem web chưa? – Phil
Nếu video trên webview giống như một VideoView, video đó sẽ nằm trên một Bề mặt, có thể chỉ là một mặt, do đó bạn đã thử tắt tăng tốc phần cứng ListView. –
@nininho: Điều này nghe có vẻ đầy hứa hẹn. Tôi đã thử đặt 'view.setLayerType (View.LAYER_TYPE_SOFTWARE, null);' trong 'onCreateView' của phân đoạn danh sách, nhưng không có thay đổi. Có hoặc không có cuộc gọi đó, một cuộc gọi đến kết quả 'getLayerType' trong' LAYER_TYPE_NONE' trên cả danh sách và lượt xem web. Có cách nào khác để yêu cầu một lớp phần mềm không?Tắt tăng tốc ở cấp ứng dụng sẽ khắc phục sự cố bố cục, nhưng tất nhiên khiến video không hiển thị. – dokkaebi