iOS 4.2.1 Mobile Safari no mostrará la imagen del póster

Question

He estado trabajando en un sitio específico para iPad que usa video HTML5 y aunque tengo la reproducción de video funcionando, no puedo por mi vida la imagen del póster para aparecer. Se ve bien en Desktop Safari. Aquí está el código:

<video src="video/about_the_man.mp4" controls height=360 width=480 poster="video/posters/about_the_man.jpg"></video> 

He través de este enlace como una referencia (listado 1.2): http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6

Se dice que en IOS se mostrará la imagen del cartel hasta que el usuario inicia la reproducción, pero en este momento todo lo que obtengo es una pantalla negra del tamaño de un video con un gran botón de reproducción en el centro. He visto otras publicaciones en esta parte superior (here y here) pero ninguna de las soluciones me ha funcionado. Lo único poco convencional del sitio es que el elemento de video está en una caja de luz en línea, por lo que inicialmente en la carga de la página no está visible, pero no sé por qué eso marcaría la diferencia.

¿Alguna idea?

Answer 1

Tuve exactamente el mismo problema. Decidí probar mi código en otros iPad, y funcionó bien. La imagen del cartel apareció.

Después de rascarme la cabeza por un momento, la solución fue reiniciar completamente el iPad y volver a intentarlo. Después de reiniciar, mi iPad mostró la imagen del póster como debería.

¿Funciona para ti?

Answer 2

He encontrado que hay un límite a la cantidad de imágenes que se pueden cargar en un iPad

Aquí está lo que dice:

llegué a una limitación Safari móvil hace poco, cuando la construcción de un AJAX-y sitio en el iPad. Si carga un montón de imágenes, eventualmente Safari móvil corta y mostrará un [?] En lugar de la imagen. Después de hacer algunas pruebas , parece que este límite es de alrededor de 6.5 MB. Aquí hay una página de prueba He intentado cargar 20 imágenes de 500kb. Al abrir esta página en un iPad, 7 de las imágenes no aparecen, a pesar de que en Charles ellos están obteniendo 200 - éxito. Supongo que esto es similar a la forma en que se activó la reproducción automática para la etiqueta de video en iPad/iPhone. Apple probablemente quiere asegurarse de que los usuarios no se sobrecarguen con descargas cuando naveguen en 3G.

De todos modos, 6.5 MB es una carga considerable y no le iría bien en 3G, pero por una razón u otra es posible que desee evitar esta limitación. Encontré que la manera más fácil de parchar mi código era cargar la imagen en una etiqueta de lona usando drawImage(). La etiqueta canvas parece ser inmune a la limitación.

Aquí está another test page usando la etiqueta canvas, todas las imágenes deben cargarse.