Układanie wideo HTML5 na iPadzie

Question

Mam wideo obsługiwane przez Ooyala, które gra dobrze na wszystkich urządzeniach. Problem występuje, gdy użytkownik znajduje się na iPadzie i próbuje wyświetlić stronę za pomocą rozwijanego menu podrzędnego. Każda sekcja subnava jest niczym więcej niż ul>li i div ukryta i pokazana za pomocą CSS. Kiedy wideo jest odtwarzane lub wstrzymane (nie podczas wczytywania), a użytkownik naciska na główną nawigację (w celu wyświetlenia odpowiedniego podrzędnego), subnav obejmuje wideo. Jednak żaden z tych linków nie reaguje na dotknięcia. Podczas próby dotknięcia linków podrzędnych wideo reaguje tak, jak gdyby były one dotykane (pokazując skruber).

Próbowałem allsorts z solutions, w tym brudząc z z-index na wszystkich powiązanych elementów, wszystko bezskutecznie. Czy jest coś, czego mi brakuje?

Jeśli chcesz wypróbować to samodzielnie, przejdź do http://www.cordblood.com na iPadzie, kliknij (lub poczekaj) na drugi (lub trzeci lub czwarty) slajd, kliknij "oglądaj wideo", naciśnij przycisk odtwarzania (możesz wstrzymaj wideo, jeśli chcesz), dotknij głównego menu nawigacyjnego, a następnie spróbuj nacisnąć jedną z opcji wyświetlanych w podpunkcie.

Answer 1

Używam flowplayer i prostego menu rozwijanego CSS i miałem ten sam problem.

Mam menu rozwijane, które po dotknięciu obejmuje część obszaru wideo. Podmenu wyświetla się zgodnie z oczekiwaniami, ale żadne zdarzenia dotykowe nie są wysyłane.

Naprawiłem go łącząc kilka propozycji od innych odpowiadając this question: ustawić widoczność: ukryty podczas otwierania menu i widoczność: widoczne podczas zamykania podmenu i ustawić -webkit -transform-style: preserve-3d Właściwość CSS na wideo.

Oto stosowny kod. Zostawiłem CSS dla paska menu, ale robi to, czego można się spodziewać - w wyniku menu obejmującego fragmenty wideo.

menu i HTML wideo

<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

Miałem podobny prob lem, ale rozwiązanie było znacznie prostsze. Wystarczy usunąć atrybut sterujący z tagu wideo. Ponieważ używam jwplayer, tag wideo jest generowany dynamicznie, więc muszę usunąć atrybut za pomocą js. z jQuery:

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

W moim przypadku, jestem już przy użyciu kontrolera niestandardowy, więc nie są potrzebne ... ale przypuszczam (nie próbowałem) można ukryć i pokazać im, dynamicznie przy niektórych działaniach użytkownika.