ios - playsinline - video html5 safari
¿Por qué Safari en iOS no muestra mi póster de video HTML5? (3)
Tengo esta página web:
http://healthpad.net/dashboard/
Tiene 10 <video> elementos en él.
Por alguna razón, cuando cargo la página en un iPad, no muestra los carteles de video.
Pruebe lo siguiente:
- cargar la página en un navegador de escritorio
- cárgalo en un simulador de iPad o iPad, y obtienes una gran caja negra con un botón de reproducción
por favor dime por qué está pasando esto?
Esto es lo que ya he descartado:
Cabecera de tipo de contenido de imagen.
Validé que el encabezado de tipo de contenido de imagen esté configurado correctamente. En el ejemplo anterior, el encabezado Content-Type muestra la image/jpeg correctamente.
Interferencia con la biblioteca video.js
VideoJs se usa para mostrar ese buen botón de reproducción en los navegadores de escritorio y para personalizar los controles. Sin embargo, esta biblioteca no interfiere con el reproductor nativo.
Solo para asegurarme, he creado una página de video de prueba que no tiene la clase de video-js, por lo que la biblioteca no recoge y procesa ese video. De hecho, la página de prueba ni siquiera incluye ninguna biblioteca JS, es solo
<html><body>
<video
controls
height="400"
width="600"
poster="http://healthpad.net/media/CACHE/images/uploads/video_poster_1414/bd5fba5a68ddd0f4b3f61193f6908962.jpg"
src="http://healthpad.net/media/uploads/video_processed_720p_1414.mp4"
></video>
</body></html>
http://healthpad.net/rj_templates/test/zzz/
Uso de atributos de video que pueden no ser compatibles con Mobile Safari
La página de prueba anterior solo tiene una etiqueta de video simple. Intenté eliminar todos los demás atributos excepto src y poster , no sirvió de nada.
La mayoría de las preguntas de StackOverflow sobre el tema solo dicen "Reiniciar su iPad"
Aquí es donde se pone raro:
Si busca en Google esto, las respuestas en StackOverflow que se han aceptado a menudo dicen "Reinicie su iPad, eso lo hizo por mí".
Así que intenté hacer lo mismo, al principio simplemente dije que no funcionaba en mi caso.
Entonces, intenté esto:
(todo lo siguiente en el simulador de iPad)
- Vaya al sitio, los carteles de video no se muestran
- Vaya a la página de prueba ( http://healthpad.net/rj_templates/test/zzz/ ), el póster de video no se muestra.
- Haga clic en Inicio para salir de Safari (o Cmd + Shift + H acceso directo de mac para el simulador)
- Haga doble clic en el botón de inicio para obtener el conmutador de tareas fuera de Safari, toque y mantenga presionado el ícono del safari hasta que aparezca el botón de matar.
- Mata Safari
- Safari abierto (reiniciado). En este punto, si carga la página de prueba (la que tiene solo un video), se mostrará el póster.
- Ahora ve a la página de videos múltiples: ( http://healthpad.net/dashboard/ ). Los carteles de video no se muestran.
- Vuelva a la página de prueba de video único, el póster de video para esa ya no funciona tampoco.
- Repita los pasos 3 a 8 para ver el proceso cuando los carteles de video dejan de funcionar.
Entonces, aparentemente, en algún momento, Mobile Safari decide que ya no mostrará ningún póster de video . Además, aparentemente, mi sitio desencadena esta condición.
Aclaraciones:
Cuando los carteles ya no funcionan, no ocurre solo en un dominio, no se cargarán carteles de video para ningún otro sitio, independientemente de si se trata de un dominio totalmente diferente (por ejemplo, el video de demostración de http://www.videojs.com/ ).
Para restablecer este comportamiento, por lo que he visto, debes matar y reiniciar Safari. Solo cerrar y volver a abrirlo no restablece este estado.
¿Alguien tiene alguna idea de por qué está pasando esto? ¿Hay alguna forma de evitarlo?
En la configuración de Safari [iOS7] Bloquear Pop-Ups en "OFF" parecía curar esto para mí, espero que esto ayude.
Lo hice funcionar usando un PNG en lugar de un JPG.
Lo extraño es que el JPG funcionaba en iOS Safari localmente (a través de un servidor POW en wifi local) pero cuando se lo empujaba a la puesta en escena, la imagen del póster no se cargaba. Tanto el código local como el provisional estaban haciendo referencia al mismo archivo en S3.
Cambió el formato de archivo a PNG y se carga bien.
Veo que la pregunta se sube cada vez más, aunque no hay respuesta. Así que esto es lo que terminé haciendo:
En iOS, en lugar de mostrar el reproductor de video (incluso con autoload=false ), solo mostraré el póster y un botón de reproducción, dos etiquetas <img> independientes. Cuando reciben un clic, creo el reproductor de video de javascript y le digo que juegue. Funciona bien, los usuarios no ven mucha diferencia.