HTML5 Video Layering на iPad

Question

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

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

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

Answer 1

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

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

Я установил ее, комбинируя несколько предложений от других ответив this question: Я установил видимости: скрытую при открытии меню и видимости: видна при закрытии подменит, и установите -webkit -транспортный стиль: 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"}); 
    } 
); 
); 

Answer 2

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

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

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