HTML5 Video Layering su iPad

Question

Ho video servito da Ooyala che funziona bene su tutti i dispositivi. Il problema si verifica quando l'utente si trova su un iPad e tenta di visualizzare una pagina tramite un sottomenu a discesa. Ogni sezione del sottonav non è altro che ul>li e un div nascosti e visualizzati tramite CSS. Quando il video è in riproduzione o in pausa (non durante il caricamento) e l'utente tocca il navigatore principale (per visualizzare la sottonav corrispondente), la subnav copre il video. Tuttavia, nessuno di questi link risponde ai tocchi. Quando si tenta di toccare i collegamenti di sottorav, il video risponde come se fosse toccato (mostrando lo scrubber).

ho cercato allsorts di solutions, tra scherzi con il z-index su tutti gli elementi correlati, tutto inutile. C'è qualcosa che mi manca?

Se desideri provare questo, vai su http://www.cordblood.com su un iPad, fai clic su (o attendi) la seconda (o terza o quarta) diapositiva, fai clic su "guarda video", premi play (puoi metti in pausa il video, se lo desideri, tocca un navigatore principale, quindi prova a selezionare una delle opzioni visualizzate dal sottonav.

Answer 1

Utilizzo il lettore di flusso e un semplice menu a discesa CSS e ho avuto lo stesso problema.

Ho un menu a discesa che, toccato, copre una parte dell'area del video. Il sottomenu viene visualizzato sul video come previsto, ma non sono stati inviati eventi di tocco.

ho riparato dalla combinazione di un paio di suggerimenti da parte degli altri rispondere this question: ho impostato visibilità: nascosti quando si apre il menu e visibilità: visibile quando si chiude il sottomenu e impostare la -webkit -transform-style: preserve-3d Proprietà CSS sul video.

Ecco il codice pertinente. Ho omesso il CSS per la barra dei menu, ma fa quello che ci si potrebbe aspettare, risultando in un menu che copre parti del video.

menu e il video 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

ho avuto un prob simile lem, ma la soluzione era molto più semplice. Basta rimuovere l'attributo controls dal tag video. Mentre sto usando jwplayer, il tag video è generato dinamicamente, quindi ho bisogno di rimuovere l'attributo usando js. con jQuery:

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

Nel mio caso, sto già utilizzando un controller personalizzato, quindi non ho bisogno di loro ... ma suppongo (non ho provato) si poteva nascondere e mostrare loro dinamicamente su qualche azione dell'utente.