HTML5 видео слоя на iPad - PullRequest
Новая
       24

HTML5 видео слоя на iPad

5 голосов
/ 31 марта 2012

У меня есть видео, обслуживаемое Ooyala , которое прекрасно воспроизводится на всех устройствах. Проблема возникает, когда пользователь находится на iPad и пытается просмотреть страницу через раскрывающийся субнап. Каждый раздел subnav - это не что иное, как ul>li и div, скрытые и показанные с помощью CSS. Когда видео воспроизводится или приостанавливается (не во время загрузки), и пользователь нажимает на главную навигационную систему (чтобы показать соответствующий субнав), субнав покрывает видео. Однако ни одна из этих ссылок не отвечает на нажатия. При попытке перейти по ссылкам subnav видео реагирует так, как если бы к нему обращались (показывая скруббер).

Я пробовал все сортировки из решений , включая обработку z-index на всех связанных элементах, но все безрезультатно. Я что-то упускаю?

Если вы хотите попробовать это сами, перейдите на http://www.cordblood.com на iPad, нажмите (или подождите) второй (или третий или четвертый) слайд, нажмите «смотреть видео», нажмите воспроизвести (вы можете приостановить видео, если хотите), коснитесь главной навигационной панели, а затем попробуйте выбрать один из параметров, отображаемых в субнав.

Ответы [ 2 ]

5 голосов
/ 28 декабря 2012

У меня была похожая проблема, но решение было намного проще. Просто нужно удалить атрибут управления из тега видео. Поскольку я использую jwplayer, тег видео генерируется динамически, поэтому мне нужно удалить атрибут с помощью js. С JQuery: 

$("video").removeAttr("controls");

В моем случае я уже использую пользовательский контроллер, поэтому он мне не нужен ... но я полагаю (я не пробовал), что вы могли бы динамически скрывать и отображать их при некоторых действиях пользователя.

5 голосов
/ 01 апреля 2012

Я использую flowplayer и простое выпадающее меню CSS, и у меня возникла та же проблема.

У меня есть раскрывающееся меню, которое при касании покрывает часть области видео. Подменю отображается поверх видео, как и ожидалось, но сенсорные события не отправлялись.

Я исправил это, объединив несколько предложений от других, ответивших на этот вопрос : я установил видимость: скрытый при открытии меню и видимость : видимый при закрытии подменю И установите -webkit-transform-style: preserve-3d CSS-свойство на видео.

Вот соответствующий код. Я исключил CSS для меню, но он делает то, что вы могли ожидать - в результате появилось меню, которое охватывает части видео.

меню и видео HTML 

<div id='nav'>
  <ul>
    ... <!-- bunch of ul/li stuff here for the menu and submenus -->
  </ul>
</div>
<div id='videoplayer'><!-- for flowplayer --></div>

CSS 

video {
  -webkit-transform-style: preserve-3d;
}

Javascript 

$(document).ready(function(){
  $("#nav li").hover(
    function() {
      $(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(300);
      $("video").css({visibility:"hidden"});
    },
    function(){ 
      $(this).find('ul:first').css({visibility: "hidden"});
      $("video").css({visibility:"visible"});
    }
  );
);
...