playsinline - video html5 iphone autoplay
La etiqueta de video HTML5 no funciona en Safari, iPhone y iPad (13)
Estoy tratando de crear una página web html5 en la que hay un pequeño video como 13s, convertí la versión flash de este video en formato 3: .ogv usando fireFogg, .webm usando firefogg también y .mp4 usando la aplicación HandBrake la secuencia de comandos html Usé en mi página:
<video width="800" height="640" loop preload="false" autoplay controls tabindex="0">
<source src="xmasvideo/video.mp4" type="video/mp4" />
<source src="xmasvideo/M&P-Xmas 2.ogv" type="video/ogv" />
<source type="video/webm" src="xmasvideo/M&P-Xmas.webm" />
</video>
El video funciona bien en Chrome y Firefox pero no funciona en Safari en el escritorio ni en iPhone o iPad, el resultado es simplemente una página en blanco que muestra los controles de la etiqueta de video pero no se carga nada
Tenga en cuenta que la versión de Safari que tengo es compatible con video HTML5
A partir de iOS 6.1, ya no es posible reproducir videos en el iPad. De acuerdo con la documentación de Apple, la función Autoplay no funciona en Safari en todos los dispositivos ios, incluido el iPad:
"Apple ha tomado la decisión de desactivar la reproducción automática de video en dispositivos iOS, a través de implementaciones de scripts y atributos.
En Safari, en iOS (para todos los dispositivos, incluido el iPad), donde el usuario puede estar en una red celular y se le puede cobrar por unidad de datos, la precarga y la reproducción automática están desactivadas. No se cargan datos hasta que el usuario lo inicia. "
Puedes leer más acerca de esto en esta documentación de Apple
Descubrí que aunque Safari es compatible con HTML5 Video, el Quicktime Player debe estar instalado para que funcione. En un sitio que construí que usa video HTML5, se alerta al usuario cuando usa Safari, diciéndoles que deben tener instalado Quicktime, de lo contrario, solo podrán ver las transcripciones de video. Espero que esto ayude.
Es posible que su servidor web no admita las solicitudes de rango de bytes HTTP. Este es el caso con el servidor web que estoy usando, y el resultado es que el widget de video se carga y aparece un botón de reproducción, pero hacer clic en el botón no tiene ningún efecto. - El video funciona en FF y Chrome, pero no en iPhone o iPad.
Lea más aquí en mobiforge.com sobre las solicitudes de rango de bytes, en el Apéndice A: Transmisión por secuencias para iPhone de Apple :
En primer lugar, Safari Web Browser solicita el contenido, y si se trata de un archivo de audio o video, abre su reproductor multimedia. Luego, el reproductor de medios solicita los primeros 2 bytes del contenido para garantizar que el servidor web admita solicitudes de rango de bytes. Luego, si los admite, el reproductor de medios del iPhone solicita el resto del contenido por rangos de bytes y lo reproduce.
Es posible que desee buscar en la Web "iphone mp4 byte-range".
He enfrentado el mismo problema. Porque el tamaño de mi fotograma de video era demasiado grande. ie.2248 px apple support H.264 Baseline Profile Nivel 3.0 de video, hasta 640 x 480 a 30 fps. Tenga en cuenta que los cuadros B no son compatibles con el perfil de línea base. mira esto para más información
He visto problemas extraños con certificados SSL de ''desarrollo'' no confiables, donde Safari móvil servirá con mucho gusto su página, pero se niega a enviar un video a un certificado SSL ''falso'', incluso si ha aceptado el certificado.
Para probar, puede implementar el video en otro lugar, o cambiar a http (para toda la página) y debería reproducirse.
Lo que ayudó en mi caso fue dejar caer la pista de audio. Antes estaba en silencio, pero tenía que desaparecer por completo.
En ubuntu:
ffmpeg -i input.mp4 -vcodec copy -an output.mp4
Y safari / escritorio comienzan a reproducir el video
Otra posible solución para sus futuros buscadores: (si su problema no es un problema de tipo mimético).
Por algún motivo, los videos no se reproducirán en el iPad a menos que establezca el control = indicador "verdadero".
Ejemplo: Esto funcionó para mí en iPhone pero no en iPad.
<video loop autoplay width=''100%'' height=''100%'' src=''//some_video.mp4'' type=''video/mp4''></video>
Y esto ahora funciona tanto en iPad como en iPhone:
<video loop autoplay controls="true" width=''100%'' height=''100%'' src=''//some_video.mp4'' type=''video/mp4''></video>
Para búsquedas futuras también, tenía un archivo mp4 que reduje la escala con Handbrake usando handbrake-gtk de apt-get , por ejemplo, sudo apt-get install handbrake-gtk . En Ubuntu 14.04, el repositorio de handbrake no incluye soporte para MP4 de fábrica. Dejé la configuración predeterminada, eliminé la pista de audio y generó un archivo * .M4V. Para quienes se preguntan, son el mismo contenedor, pero M4V se usa principalmente en iOS para abrir en iTunes.
Esto funcionó en todos los navegadores excepto en Safari:
<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
<source src="//cdn.foo.com/bar-video.m4v" type="video/mp4">
<source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>
Cambié el tipo de mimo entre video/mp4 y video/m4v sin ningún efecto. También probé agregando el atributo de control y nuevamente, sin efecto.
Esto funcionó en todos los navegadores probados, incluyendo Safari 7 en Mavericks y Safari 8 en Yosemite. Simplemente cambié el nombre del mismo archivo m4v (el archivo real, no solo el HTML) a mp4 y volví a cargarlo en nuestro CDN:
<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
<source src="//cdn.foo.com/bar-video.mp4" type="video/mp4">
<source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>
Safari, creo que está esperando un MP4 realmente llamado. Ninguna otra combinación de archivo y tipo de mimo funcionó para mí. Creo que los otros navegadores optan primero por el archivo WEBM, especialmente Chrome, aunque estoy bastante seguro de que la lista fuente debe seleccionar la primera fuente que sea técnicamente compatible.
Sin embargo, esto no ha solucionado el problema del video en dispositivos con iOS (iPad 3 "el nuevo iPad" y el iPhone 6 probado).
Para un .mp4 esto funciona (safari mobile y desktop):
<video height="250" width="250" controls>
<source src="video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
Los controls=”true” mencionados en una publicación anterior no me importan, ya que Apple dice que simplemente usa controles por sí misma.
Referencia: "Para usar audio o video HTML5, comience creando un elemento o, especificando una URL de origen para los medios, e incluyendo el atributo de controles. <video src="http://example.com/path/mymovie.mp4" controls></video> "
En mis tratos (una pequeña digresión) : he descubierto que subir videos desde el iPhone los envía al servidor como .quicktime. Irónicamente, este es el problema cuando intenta reproducir el video del servidor en safari. (móvil y escritorio).
Entonces, si (como yo) está experimentando un problema de .quicktime (o cualquier cosa que no sea .mp4) en safari , aquí hay una solución provista por Apple. Tenga en cuenta que todavía tengo que probarlo y no estoy tan contento con él de un solo vistazo, solo brindo más información.
Referencia: "Volver al complemento de QuickTime Hay una manera simple de recurrir al complemento de QuickTime que funciona para casi todos los navegadores: descargue el archivo de JavaScript precompilado proporcionado por Apple, ac_quicktime.js, de HTML Video Example y inclúyalo en su página web insertando la siguiente línea de código en su encabezado HTML: <script src="ac_quicktime.js" type="text/javascript"></script> "
Actualización: para .quicktime cambiar el nombre a .mov antes de subirlo al servidor (en base64 tipo de archivo "data: video / mov;"), omita ac_quicktime.js. . . luego funcionará en la etiqueta de video html; Hackerdy Hack.
Si sus videos están protegidos por un sistema de inicio de sesión basado en sesión, Safari no podrá cargarlos. Esto se debe a que Safari realiza una solicitud inicial para el video y luego pasa la tarea a QuickTime, que hace otra solicitud. Como Safari contiene la información de la sesión, pasará la autenticación, pero QuickTime no lo hará.
Puede ver esto si ve el registro de acceso del servidor ... primero la solicitud de Safari, luego la solicitud de QuickTime. Otros navegadores solo hacen una sola solicitud desde el navegador.
Si este es su problema, puede que tenga que volver a trabajar el acceso de video para usar tokens temporales o un acceso de tiempo limitado desde la solicitud original. Actualizaré esta respuesta si encuentro una solución más directa.
Solo agrega un atributo muted y todo funcionará bien.
La fuente de esta respuesta está aquí: https://webkit.org/blog/6784/new-video-policies-for-ios/
Por defecto, WebKit tendrá las siguientes políticas:
<video autoplay>ahora respetarán el atributo de reproducción automática, para los elementos que cumplan con las siguientes condiciones:
<video>elementos de<video>podrán reproducir automáticamente sin un gesto de usuario si sus medios de origen no contienen pistas de audio.<video muted>también podrán reproducirse automáticamente sin un gesto de usuario.- Si un elemento
<video>gana una pista de audio o no se silencia sin un gesto del usuario, la reproducción se detendrá.<video autoplay>solo comenzarán a reproducirse cuando estén visibles en la pantalla, como cuando se desplazan hacia la ventana gráfica, se hacen visibles a través de CSS y se insertan en el DOM.<video autoplay>detendrán si dejan de estar visibles, como al desplazarse fuera de la ventana gráfica.
<video>elementos<video>honrarán ahora el método play () para elementos que cumplan las siguientes condiciones:
<video>elementos<video>se podrán reproducir () sin un gesto de usuario si sus medios de origen no contienen pistas de audio, o si su propiedad silenciada está establecida en verdadero.- Si un elemento
<video>gana una pista de audio o no se silencia sin un gesto del usuario, la reproducción se detendrá.<video>elementos<video>se podrán reproducir () cuando no estén visibles en la pantalla o cuando estén fuera de la vista.- video.play () devolverá una Promesa, que será rechazada si no se cumple alguna de estas condiciones.
En el iPhone, los elementos de
<video playsinline>ahora se podrán reproducir en línea, y no entrarán automáticamente en el modo de pantalla completa cuando comience la reproducción.<video>elementos de<video>sin atributos en línea continuarán requiriendo el modo de pantalla completa para la reproducción en el iPhone. Al salir de la pantalla completa con un gesto de pellizco,<video>elementos de<video>sin playinline continuarán reproduciéndose en línea.
Tuve el mismo problema con los dispositivos Apple como iPhone y iPad, apagué el modo de baja energía y funcionó, y también debe incluir el atributo playinline en una etiqueta de video como esta
<video class="video-background" autoplay loop muted playsinline>
Tuve este problema donde la reproducción de .mp4 en Safari no funcionaba, pero en otros navegadores estaba bien. El error que estaba viendo en la consola era: error media src no soportado. En mi caso, esto resultó ser un problema de tipo MIME, pero no porque no se haya declarado como tipo MIME en IIS, sino que se declaró dos veces (una vez en IIS y también en un archivo web.config). Descubrí esto tratando de descargar el archivo .mp4 localmente en el servidor. Eliminé el archivo de configuración de la ubicación del contenido que estaba intentando reproducir y solucionó el problema. Podría haber eliminado el tipo MIME del archivo web.config, pero en este caso el archivo web.config no era necesario.