iPad/iPhone video HTML5 cargando

Question

Estoy intentando cargar sobre la marcha en el iPad/iPhone y noto que no puedo colocar un div encima de esto. Puse la superposición en el html para que se genere en la carga de la página y no se agregue a través de javascript y el video cuando se crea está absolutamente posicionado debajo de este elemento. Esto funciona en una PC, me pregunto si desde que fue creado a través de js, ¿que el sistema operativo del iPhone está anulando el índice Z y forzando a la parte superior?

También hay una manera de anular el icono predeterminado "no se puede reproducir", el que tiene la barra oblicua, y mostrar una animación de carga en su lugar? Esto resolvería mi problema a través de otra ruta.

Mi última opción sería cargar todas las etiquetas de video a través de js en la carga de la página y colocarlas una sobre otra para el iPad/iPhone? Dado que el iPhone OS no cargará ningún video hasta que se solicite, ¿funcionaría?

También estoy teniendo un problema con el iPhone y mostrando el atributo "poster" que se establece en la etiqueta de video.

Answer 1

iPhone no soporta el cartel ... hasta OS4

Answer 2

Puede colocar una imagen absolutamente sobre el reproductor de vídeo. Safari en iPhone lo renderizará con un símbolo transparente de "reproducción". Creo que algo como esto puede funcionar:

<style type="text/css"> 
div.player 
{ 
    position: relative; 
    margin: 0; 
    padding: 0; 
} 

div.player > img.preview 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 9; 
    cursor: pointer; 
} 
</style> 

Y

<div class="player"> 
    <img class="preview" src="zk/grumpies.png" width="320" height="240" alt="click to play" title="click to play"> 
    <video width="320" height="240" controls="controls"> 
    <source type="video/mp4" src="mah/mahnamahna.m3u8" width="320" height="240" /> 
    </video> 
</div> 

en un iPad que pueden funcionar de forma diferente dependiendo de si se utiliza <video controls /> o no - en cuyo caso es necesario proporcionar sus propios controles con javascript o no podrá iniciar sus medios.

El ícono de 'no se puede jugar' en mi experiencia normalmente siempre indica que los medios no se pueden reproducir ;-) debido a tener el tipo mimet incorrecto o códec incorrecto, etc. Anularía el caso de verificando las excepciones de errores de carga de medios con javascript.

La superposición de capas uno encima del otro es imposible. Puedes fingir tal vez cambiando de posición.

Answer 3

Estaba teniendo el mismo problema exacto con el reproductor de video del iPad. Visualmente, el índice z era más bajo que la superposición para el cuadro de diálogo, pero en realidad no lo era. Si reemplaza los controles predeterminados por los suyos mediante javascript, el problema desaparece.

http://sandbox.solutionsbydesign.com/montage/ipad/

que utiliza el artículo Nettuts en hacer su propio reproductor de vídeo HTML5

Answer 4

me encontré con un muy buen trabajo en torno. Estoy usando jquery, así que eso es algo a tener en cuenta.

Mi problema era que estaba construyendo una aplicación web Ipad, con un botón de navegación en la parte inferior izquierda (no puedo dar un enlace ya que es un proyecto de cliente). Cuando el usuario haga clic (toque) en el botón de la esquina inferior izquierda, un menú desplegable animaría, y luego podría hacer clic en los botones de esos menús para acceder a los submenús más profundos.

El problema:

ninguna etiqueta li (o lo que fuera) que estaba sobre el video, no habría puede hacer clic, por lo que en las páginas con vídeo, parte de mi grifo de navegación (la parte del video no funcionaría).Leer publicaciones aquí en realidad me llevan a mi solución, simple, y puede o no funcionar para su caso, pero espero que sí.

Mi solución:

var myNav = $("TAG_SELECTOR_HERE"); 

myNav.toggle(function(){ 
    var videos = $("video"); 
    videos.removeAttr("controls"); 
}, 
function(){ 
    var videos = $("video"); 
    videos.attr("controls","true"); 
}) 

ahora sé que puede faltar algunos puntos y comas, o mi codificación puede ser apagado, pero simplemente dejo de referencia. Básicamente, cuando se hace clic en mi menú, o está activo, elimino el atributo de control de todos los videos, y cuando el menú está desactivado, devuelvo los controles.

Puede utilizar este método en cualquier lugar que desee ... puede quitar los controles después de que termine un video, después de que alguien pasa sobre algo (suponiendo que algo no está sobre el video), cuando el mouse está dentro de ciertas coordenadas (puede ser su única solución en casos extremos) pero esto debería funcionar.

Gracias!

-Nick