iPad Safari mobile parece ignorar la posición de indexación z para elementos de video html5

Question

Obtuve un elemento de video en una página que funciona bien tanto en Safari como en el escritorio. Tengo un menú desplegable seme-transparent que funciona bien. El problema es que cuando el menú está sobre el elemento de video, en el safari de escritorio puedo ver el video debajo del menú (como se desee), mientras que en la versión móvil el elemento de video permanece en primer plano (feo) sin importar lo que diga el css. ¿Hay algún trabajo alrededor?

Answer 1

El problema solo ocurre si el elemento de video se creó dinámicamente. Si el elemento estaba solo en la página cuando se cargó, z-index funciona bien.

Puede corregir z-index en videos creados dinámicamente dando el elemento de video -webkit-transform-style: preserve-3d.

¡Sí, es tan malo como haslayout en IE!

Answer 2

Desafortunadamente no

.

Según mi experiencia y la comprensión de cómo funciona iOS actualmente, esto no es posible.

Mobile Safari en el iPad corta un agujero para una ventana de Quicktime, que reproduce el video utilizando la aceleración de hardware incorporada para mejorar la duración de la batería. (El iPhone y el iPod Touch solo lo abren en una ventana separada para lograr el mismo efecto.)

Esta ventana no funciona muy bien con el otro HTML de la página. De hecho, no he encontrado una forma de que Safari móvil muestre nada encima de una etiqueta. Mi suposición es que esto se debe a que la aceleración de hardware solo permite escalar y posicionar el video, y que solo puede manejar un video a la vez.

Answer 3

He logrado colocar un menú div sobre una etiqueta de video html5 en el móvil-safari en el ipad. Para ser sincero, no tuve ningún problema y simplemente funcionó. ¿Podría ser porque estaba usando animaciones CSS3 y, por lo tanto, la GPU? Podría intentar usar un truco para agregar un elemento a la GPU. Si coloca -webkit-transform: translateZ(0); en el elemento, debe forzarlo a usar la GPU ...

Answer 4

-webkit-transform-style:preserve-3d y -webkit-transform:translateZ(0) no funcionó para mí.

El uso de Flowplayer con el plugin ipad y el plugin de la barra de control me permitieron eliminar la barra de control creada por ipad y reemplazarla con algo que puede indexarse ​​z debajo de mis ventanas modales.

Answer 5

Me encontré con esto también. La única cosa que podía llegar a trabajar para mí fue la de añadir

display:none 

a la etiqueta de vídeo al mostrar un div sobre ella que necesitaba ser hecho clic en.

Answer 6

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 responder a esta pregunta: He definido visibilidad: ocultos al abrir el menú y 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 7

Usted puede arreglar z-index en videos creados dinámicamente dando el elemento de video -webkit-transform-style: preserve-3d.

Esto funcionó para mí con un elemento de video creado dinámicamente. También configuré el z-index del div de sobreposición en z-index: 888;, que también puede haber ayudado.

Answer 8

Tuve este problema que estaba ocurriendo en dispositivos móviles con un menú fuera de lienzo. Cuando el menú estaba sobre el video, no se podía tocar ninguno de los elementos del menú.

lo fijé mi moviendo el video en otro lugar cuando el menú estaba en posicionándolo absolutamente en -100000px cuando el menú no se visualiza que la volvió estando posicionado relativamente.

He encontrado usando la pantalla ninguno que no funcionó como cuando se establece que se bloquee de nuevo el video no funcionaría.

También probé ajustar la altura a 0 - esto no funcionó como el video todavía parecía ocupar el espacio a pesar de que no se podía ver.

El método final parece un poco extremo pero no se nota realmente cuando se está utilizando.

Answer 9

Este es el código que funcionará tanto en el iPad como en el iPhone. Intenté quitar los controles y luego volver a agregarlos, pero esto solo funcionaba en el iPad que no estaba en el iPhone. Luego de eliminar la opacidad y volver a agregarla, también funcionó en iPhone.

$("#overlay_open").click(function(){ 
    $("video").prop("controls", false); 
    $("video").css("opacity", 0); 
}); 

$("#overlay_close").click(function(){ 
    $("video").prop("controls", true); 
    $("video").css("opacity", 1); 
}); 

Answer 10

acabo de encontrar con este problema hoy & tuvo que improvisar una solución de múltiples respuestas, ya que ninguno manipula totalmente el problema ...

tengo elementos de vídeo en una "vista de tabla" lista de estilos que se derrumbó Capturamos eventos táctiles en el iPhone cuando intentábamos tocar otros elementos de la lista. En el iPhone, los videos se reproducían al tocar otros elementos colapsados ​​que ocupaban el mismo lugar en la pantalla.

La fijación de este requiere todo lo siguiente:

1) El uso de este:

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

... no parece tener ningún efecto, pero lo dejé en cualquier caso. Todo está funcionando ahora, así que no quiero atornillarlo más :)

2) Alternar visibility: hidden solo no funcionó, y display:none no funcionó como se esperaba.

3) Además de "visibilidad" la etiqueta de vídeo HTML5 controls atributo también tiene que ser añadido/eliminado dinámicamente. O bien:

$("video").css({visibility:"hidden"}).removeAttr("controls"); o $("video").css({visibility:"visible"}).attr("controls", "controls");

4) Debe establecer la visibilidad/controles de carga de documentos basados ​​en el tamaño del navegador/pantalla inicial

5) Aunque la principal preocupación era el comportamiento iPhone chiflado, también tuvieron que cuenta para cambios de tamaño de ventana receptivos por encima de mi punto de corte de consulta de medios más pequeño de 600px; de lo contrario, los videos aparecerían/​​desaparecerían en los tamaños de pantalla incorrectos.

$(window).resize(function(){ 
    if ($(window).width() > 600){ 
     $("video").css({visibility:"visible"}).attr("controls", "controls"); 
    } 
}); 

Todo un dolor para evitar lo que es esencialmente un error de Safari móvil estúpida ... Por supuesto, espero que funciona en el iPad cuando pruebo más tarde ...

Answer 11

Para cualquiera que se produzcan problemas con esto todavía , otra solución que terminó trabajando para mí fue cambiar las opciones en el código de inserción para no permitir controles, videos sugeridos y título de video y opciones de reproducción. He añadido un simple Modernizr.MQ consulta para cambiar el src para la tableta y móvil, e incluyó lo siguiente a la src iframe para móviles:?

rel = 0 & controles = 0 & showinfo = 0

nunca por completo de orugas por qué esto funciona, pero mi conjetura es que los controles tienen cierto estilo de agente de usuario que les da un alto índice z y hace que el elemento se sienta encima de todo.