HTML5 Video Layering en iPad

Question

Tengo video servido por Ooyala que se reproduce bien en todos los dispositivos. El problema ocurre cuando el usuario está en un iPad e intenta ver una página a través de un subnav desplegable. Cada sección del subnav no es más que ul>li y div oculta y se muestra a través de CSS. Cuando el video se está reproduciendo o se está pausando (no durante la carga) y el usuario toca el navegador principal (para mostrar el subnav correspondiente), el subnav cubre el video. Sin embargo, ninguno de estos enlaces responde a grifos. Al intentar tocar los enlaces subnav, el video responde como si se estuviera tocando (mostrando el depurador).

me han tratado allsorts de solutions, incluyendo jugar con el z-index en todos los elementos relacionados, todo en vano. ¿Se me escapa algo?

Si desea probar esto por su cuenta, vaya al http://www.cordblood.com en un iPad, haga clic (o espere) en la segunda (o tercera o cuarta) diapositiva, haga clic en "ver video", toque reproducir (puede pause el video si lo desea, también), toque un navegador principal y luego intente presionar una de las opciones que muestra el subnav.

Answer 1

Estoy usando Flowplayer y un menú desplegable de CSS simple y tuve el mismo problema.

Tengo menú desplegable que, cuando se toca, cubre parte del área de video. El submenú aparece en el video como se esperaba, pero no se enviaron eventos táctiles.

me fijo mediante la combinación de un par de sugerencias de los demás respondiendo this question: He definido visibilidad: ocultos al abrir el menú y la visibilidad : visibles al cerrar el submenú, y establecer el webkit -transform-style: preserve-3d propiedad de CSS en el video.

Aquí está el código pertinente. Olvidé el CSS de la barra de menú, pero hace lo que cabría esperar, lo que da como resultado un menú que cubre partes del video.

menú y vídeo 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

que tenían un prob similares Lem, pero la solución fue mucho más simple. Solo necesita eliminar el atributo de controles de la etiqueta de video. Como estoy usando jwplayer, la etiqueta de video se genera dinámicamente, por lo que necesito eliminar el atributo usando js. con jQuery:

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

En mi caso, ya estoy usando un controlador personalizado, así que no los necesita ... pero supongo (no he probado) que podría ocultar y mostrar dinámicamente encendido sobre alguna acción del usuario.