2012-10-26 1 views
11

У меня есть приложение для планшетов с разделенным расположением - список слева и панель деталей справа. Правая панель - это WebView и содержит тег <video>. Все это прекрасно работает, за исключением того, что вся правая часть WebView отключена и отображает белый цвет.Частичный экран WebView с <video> разрезанный наполовину

Почему это так, и как я могу избежать этого, не вставляя огромный взлом?

Я сварил его до простого тестового проекта, который я опубликовал on github.

скриншот: http://d.pr/i/dfEh.

Серая область слева расположена в списке. Я просто изменил его на пустой FrameLayout. Отрезанная часть по правой стороне WebView IS та же ширина, что и в виде списка. Также стоит отметить, что любой контент ниже видео также отключен - белая область расширяет всю высоту WebView.

Некоторых вещи, которые я пробовал:

  • заменить вид списка с чем-то еще
  • включить и отключить WebSettings: JavaScript, использовать широкий видовой экран, нагрузку с обзорным режимом
  • установлен в WebViewClient и a WebChromeClient
  • включить и выключить аппаратное ускорение
  • различные установки NGS в View.setScrollBarStyle, WebView.setVerticalScrollBarOverlay, и аналогичные
  • настройки
  • различные устройства в <video> «S высота/ширина атрибуты и стили
  • различные форматы видео, включая MP4 с h264 и ААС, M3U8 и поток RTSP YouTube, в том числе Огонь HD показано, Nexus 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; 

Я действительно чесать голову над этим, и я удивлен, что я не смог найти ни одного упоминания о ней. Любой вход оценивается, как бы надуманный.

+0

Считаете ли вы использование оверлея VideoView вместо встраивания видео в веб-просмотр? – Phil

+0

Если видео в веб-виде похоже на VideoView, оно будет на поверхности, которое может быть только одним, так что вы пытались отключить аппаратное ускорение ListView. –

+0

@nininho: Звучит многообещающе. Я попытался установить 'view.setLayerType (View.LAYER_TYPE_SOFTWARE, null);' в 'onCreateView' фрагмента списка, но изменений нет. С или без этого вызова вызов 'getLayerType' приводит к' LAYER_TYPE_NONE' как в списке, так и в веб-представлениях. Есть ли другой способ запросить уровень программного обеспечения?Выключение ускорения на уровне приложения устраняет проблему макета, но, разумеется, приводит к тому, что видео не отображается. – dokkaebi

ответ

1

Проблема, похоже, связана со слоем оборудования/opengl. Поскольку VideoView использует аппаратный уровень для рендеринга видео, я считаю, что то же самое происходит с webView с видео.

Поэтому, если вы правильно настроили слои, они не должны мешать друг другу, так что, как я уже сказал на коментах, вы должны установить ListView на слой none или программное обеспечение, чтобы отключить аппаратное ускорение и включить его на webView или окно.

Более подробная информация о ускорения.Поддерживаются http://developer.android.com/guide/topics/graphics/hardware-accel.html#controlling

1

У меня была та же проблема, что было со мной, используя относительное расположение. Слой, на который он передает видео, не перемещается с веб-просмотром. Таким образом, он будет отображать видео, как если бы веб-просмотр был помещен в 0,0.

Вы можете обойти это, фактически разместив webview на 0 0, за любыми компонентами, которые уже могут быть там. Затем в css дайте контенту запас, чтобы расположить его на правильном месте.

Это может быть не чисто, но я не нашел другого решения.

РЕДАКТИРОВАТЬ: После лучшего обзора вашего вопроса, я думаю, что это не имеет никакого отношения к относительной компоновке, поскольку вы не используете ее. Тем не менее этот обходной путь работал на меня. Поэтому я предполагаю, что «Уровень видео» остается на уровне 0,0 независимо от того, какой формат вы используете. Я только столкнулся с этой проблемой на Galaxy Tab 2 (android 4.0.3).

-1

У меня была такая же проблема в макете макета/детализации потока. Установив тип слоя для программного обеспечения, мое видео было сокращено наполовину проблем. Это отключает аппаратное ускорение для веб-просмотра.

webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null); 

FYI Я испытал эту проблему только на планшетах Amazon.

Смежные вопросы