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

video html5 safari

Question

Tengo un elemento de video en una página que funciona bien tanto en Safari como en el escritorio. Tengo un menú desplegable de 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

Acabo de toparme con este problema hoy y tuve que improvisar una solución a partir de varias respuestas, ya que ninguno resolvió completamente el problema ...

Tengo elementos de video en una lista de estilo de "vista de tabla" contraída que capturaba eventos táctiles en el iPhone cuando intentaba 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 reparación de esto requirió todo lo siguiente:

1) Usando esto:

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

... no parecía tener ningún efecto, pero lo dejé de todos modos. Todo está funcionando ahora, así que no quiero fastidiarlo más :)

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

3) Además de la "visibilidad", el atributo de controls etiquetas de video HTML5 también debe agregarse / eliminarse dinámicamente. Ya sea:

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

4) Debe establecer visibilidad / controles en la carga del documento basado en el tamaño inicial del navegador / pantalla

5) Aunque la principal preocupación fue el comportamiento del iPhone, también tuve que dar cuenta de los cambios en el tamaño de la ventana sensible por encima de mi punto de referencia de 600px más pequeño, 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");
    }
});

Me duele mucho trabajar con lo que es esencialmente un error de Safari móvil estúpido ... Espero que funcione en iPad cuando lo pruebe más tarde ...

Answer 2

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 3

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

Tengo un 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.

Lo arreglé combinando un par de sugerencias de otros que respondían a esta pregunta: establecí la visibilidad: oculta al abrir el menú y la visibilidad: visible al cerrar el submenú, Y establezco la propiedad CSS -webkit-transform-style: preserve-3d en el vídeo.

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 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 4

He logrado colocar un menú div sobre una etiqueta de video html5 en el safari móvil 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 pones -webkit-transform: translateZ(0); en el elemento debe obligarlo a usar la GPU ...

Answer 5

Lamentablemente no.

En base a mi experiencia y comprensión de cómo funciona actualmente iOS, 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 iPod Touch solo lo abren en una ventana separada para lograr el mismo efecto).

Esta ventana no funciona bien con el otro HTML en 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 6

Me encontré con esto también. Lo único que pude conseguir para trabajar fue agregar

display:none

a la etiqueta de video cuando se muestra un div sobre el que se debe hacer clic.

Answer 7

Para cualquier persona que tenga problemas con esto, 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. Agregué una consulta simple de Modernizr.MQ para cambiar el src para tableta y móvil, e incluí lo siguiente en el iframe src para móvil:

? rel = 0 & controls = 0 & showinfo = 0

Nunca rastreé completamente por qué funciona esto, pero creo que los controles tienen un estilo de agente de usuario que les da un alto índice Z y hace que el elemento se sienta encima de todo.

Answer 8

Puede corregir 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 establecí el z-index del div superpuesto al z-index: 888; que también puede haber ayudado.

Answer 9

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

Lo arreglé para mover el video a otro lugar cuando el menú estaba encendido colocándolo absolutamente a -100000px cuando el menú no se visualizaba, lo establecí de nuevo posicionándolo relativamente.

Me pareció que usar la pantalla no funcionaba, ya que cuando lo configuraba para bloquear nuevamente, el video no funcionaba.

También intenté establecer la altura en 0, esto no funcionó ya que el video aún parecía ocupar el espacio aunque no se podía ver.

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

Answer 10

-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 para ipad y reemplazarla con algo que puede indexarse ​​z debajo de mis ventanas modales.

Answer 11

El problema solo ocurre si el elemento de video fue creado dinámicamente. Si el elemento estaba solo en la página mientras se cargaba, 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!