La etiqueta de video HTML5 no funciona en Safari, iPhone y iPad

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 el script 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 absoluto ni en Safari en el escritorio ni en iPhone o iPad, la salida 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 admite video HTML5

Tuve el mismo problema con dispositivos Apple como iPhone y iPad, apagué el modo de bajo consumo y funcionó y también debes incluir un playsinlineatributo en la etiqueta de video como este:

<video class="video-background" autoplay loop muted playsinline>

Solo funcionó cuando se incluyó playsinline.

Otra posible solución para sus futuros buscadores: (si su problema no es un problema de tipo mime).

Por alguna razón, los videos no se reproducirán en el iPad a menos que establezca la bandera de controles = "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>

Es posible que su servidor web no admita solicitudes de rango de bytes HTTP. Este es el caso del 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: Streaming para Apple iPhone :

Primero, el navegador web Safari solicita el contenido y, si es un archivo de audio o video, abre su reproductor multimedia. Luego, el reproductor de medios solicita los primeros 2 bytes del contenido, para asegurarse de que el servidor web admita solicitudes de rango de bytes. Luego, si los admite, el reproductor multimedia 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".

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 entrega la tarea a QuickTime, que realiza otra solicitud. Dado que Safari contiene la información de la sesión, pasará la autenticación, pero QuickTime no.

Puede ver esto si ve el registro de acceso al servidor ... primero la solicitud de Safari, luego la solicitud de QuickTime. Otros navegadores solo realizan una solicitud desde el propio navegador.

Si este es su problema, es posible que deba modificar el acceso al video para usar tokens temporales o un acceso por tiempo limitado desde la solicitud original. Actualizaré esta respuesta si encuentro una solución más directa.

Para búsquedas en el futuro, así, que tenía un archivo MP4 que yo reducidos con el freno de mano utilizando handbrake-gtkdesde apt-get, por ejemplo sudo apt-get install handbrake-gtk. En Ubuntu 14.04, el handbrakerepositorio no incluye soporte para MP4 listo para usar. Dejé la configuración predeterminada, quité la pista de audio y genera un archivo * .M4V. Para aquellos que se preguntan, son el mismo contenedor, pero M4V se usa principalmente en iOS para abrir en iTunes.

Esto funcionó en todos los navegadores excepto 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 mímica entre video/mp4y video/m4vsin efecto. También probé agregando el controlatributo y nuevamente, sin efecto.

Esto funcionó en todos los navegadores probados, incluidos Safari 7 en Mavericks y Safari 8 en Yosemite. Simplemente renombré el mismo archivo m4v (el archivo real, no solo el HTML) a mp4 y lo volví a cargar 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>

Creo que Safari está esperando un MP4 con nombre real. Ninguna otra combinación de archivo y tipo 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 de fuentes debería seleccionar la primera fuente que sea técnicamente compatible.

Sin embargo, esto no ha solucionado el problema del video en los dispositivos iOS (iPad 3 "el nuevo iPad" y iPhone 6 probados).

Simplemente agregue un mutedatributo y todo funcionará bien.

La fuente de esta respuesta está aquí: https://webkit.org/blog/6784/new-video-policies-for-ios/

De forma predeterminada, WebKit tendrá las siguientes políticas:

<video autoplay> Los elementos ahora respetarán el atributo de reproducción automática, para elementos que cumplan las siguientes condiciones:

• <video> Se permitirá que los elementos se reproduzcan automáticamente sin un gesto del usuario si sus medios de origen no contienen pistas de audio.
• <video muted> Los elementos también podrán reproducirse automáticamente sin un gesto del usuario.
• Si un <video>elemento obtiene una pista de audio o deja de silenciarse sin un gesto del usuario, la reproducción se detendrá.
• <video autoplay> los elementos 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> los elementos se detendrán si se vuelven no visibles, por ejemplo, si se desplazan fuera de la ventana gráfica.

<video> Los elementos ahora respetarán el método play (), para elementos que cumplan las siguientes condiciones:

• <video> Se permitirá que los elementos se reproduzcan () sin un gesto del usuario si sus medios de origen no contienen pistas de audio, o si su propiedad silenciada se establece en true.
• Si un <video>elemento obtiene una pista de audio o deja de silenciarse sin un gesto del usuario, la reproducción se detendrá.
• <video> Los elementos podrán reproducirse () cuando no estén visibles en la pantalla o cuando estén fuera de la ventana gráfica.
• video.play () devolverá una Promesa, que será rechazada si no se cumple alguna de estas condiciones.

En iPhone, <video playsinline>ahora se permitirá que los elementos se reproduzcan en línea y no ingresarán automáticamente al modo de pantalla completa cuando comience la reproducción. <video>Los elementos sin atributos de playinline seguirán requiriendo el modo de pantalla completa para su reproducción en iPhone. Al salir de la pantalla completa con un gesto de pellizcar, los <video>elementos sin playinline seguirán reproduciéndose en línea.

Descubrí que aunque Safari es compatible con HTML5 Video, Quicktime Player debe estar instalado para que esto funcione. En un sitio que construí que usa HTML5 Video, el usuario recibe una alerta cuando usa Safari, diciéndole que debe tener Quicktime instalado, de lo contrario solo podrá ver las transcripciones de video. Espero que esto ayude.

He visto problemas extraños con certificados SSL de "desarrollo" no confiables en los que Safari móvil servirá su página con mucho gusto, pero se niega a mostrar 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.

Agregar 'playinline' funciona para mí en Iphone e Ipa si no le importa que su video esté silenciado.

<video muted playsinline>
  <source src="..." type="video/mp4">
</video>

Si no desea que su video se silencie, pero aún desea la reproducción automática, tal vez intente eliminar el atributo silenciado con js: Cómo reactivar el video html5 con un accesorio silenciado

A partir de iOS 6.1, ya no es posible reproducir videos automáticamente en el iPad. Según la documentación de Apple, la función de reproducción automática no funciona en Safari en todos los dispositivos ios, incluido el iPad:

"Apple ha tomado la decisión de deshabilitar la reproducción automática de video en dispositivos iOS, mediante implementaciones de atributos y de secuencias de comandos.

En Safari, en iOS (para todos los dispositivos, incluido el iPad), donde el usuario puede estar en una red celular y cobrar por unidad de datos, la precarga y la reproducción automática están deshabilitadas. No se carga ningún dato hasta que el usuario lo inicia. "

Puede leer más al respecto en esta documentación de Apple

Para un .mp4 esto funciona (safari móvil y de escritorio):

<video height="250" width="250" controls>
    <source src="video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

Lo controls=”true”mencionado en una publicación anterior no me importa, ya que Apple dice que solo use los controles por sí solo.

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

Fuente: https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html

En mis tratos (una pequeña digresión) : he descubierto que subir videos desde iPhone lo envía al servidor como .quicktime. Irónicamente, este es el problema al intentar reproducir el video desde el servidor en un safari. (móvil y escritorio).

Entonces, si (como yo) está experimentando un problema de .quicktime (o cualquier otra cosa que no sea .mp4) en safari , aquí hay una solución proporcionada por Apple. Tenga en cuenta que todavía tengo que probarlo yo mismo y no estoy tan contento con él de un vistazo, solo proporciono más información.

Referencia: "Recurrir al complemento QuickTime Existe una forma sencilla de recurrir al complemento QuickTime que funciona para casi todos los navegadores: descargue el archivo JavaScript prediseñado 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> "

Fuente: https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6

Actualización: para cambiar el nombre de .quicktime a .movla carga anterior al servidor (en el tipo de archivo base64 "data: video / mov;"), omita ac_quicktime.js. . . luego funcionará en la etiqueta de video html; Hackerdy ​​Hack.

Al usar este código, el video se reproducirá en todos los navegadores en Safari, así como con dispositivos ios ... Vayan todos (lo he usado y funciona bien)

'

<video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
    	<source src="video/video.mp4" type="video/mp4"></source>
		<source src="video/video.webm" type="video/webm"></source>
		<source src="video/video.mov" type="video/mov"></source>
</video>

'

Tuve un problema similar en el que los videos dentro de una <video>etiqueta solo se reproducían en Chrome y Firefox, pero no en Safari. Esto es lo que hice para solucionarlo ...

Un truco extraño que encontré fue tener dos referencias diferentes a tu video, una en una <video>etiqueta para Chrome y Firefox, y la otra en una <img>etiqueta para Safari. Dato curioso, los videos realmente se reproducen en una <img>etiqueta en Safari. Después de esto, escriba un script simple para ocultar uno u otro cuando se use un determinado navegador. Así por ejemplo:

<video id="video-tag" autoplay muted loop playsinline> 
    <source src="video.mp4" type="video/mp4" />  
</video>
<img id="img-tag" src="video.mp4">

<script type="text/javascript">
    function BrowserDetection() {

    //Check if browser is Safari, if it is, hide the <video> tag, otherwise hide the <img> tag
    if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
        document.getElementById('video-tag').style.display= "none";
    } else {
        document.getElementById('img-tag').style.display= "none";
    }               

    //And run the script. Note that the script tag needs to be run after HTML so where you place it is important. 
    BrowserDetection();
</script>

Esto también ayuda a resolver el problema de un marco / borde negro delgado en algunos videos en ciertos navegadores donde se procesan incorrectamente.

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 not supported. En mi caso, resultó ser un problema de tipo MIME, pero no porque no se declaró 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 al intentar descargar el archivo .mp4 localmente en el servidor. Eliminé el archivo de configuración de la ubicación del contenido que estaba tratando de reproducir y solucionó el problema. Podría haber eliminado el tipo MIME del archivo web.config, pero en este caso no era necesario el archivo web.config.

Para IOS, utilice solo el archivo fuente mp4. He observado un problema en el último navegador Safari que el navegador Safari no puede detectar el archivo de origen correctamente y, debido a esto, la reproducción automática de video no funciona.

Veamos el siguiente ejemplo:

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
        <source src="video/video.webm" type="video/webm"></source>
     </video>

Como he usado mp4, webm en archivos fuente. Safari deosnt soporta webm pero aún en la última versión de safari, seleccionaría webm y falla la reproducción automática de video.

Entonces, para trabajar con la reproducción automática en todos los navegadores compatibles, le sugiero que primero verifique el navegador y, en función de eso, debe generar su html.

Entonces, para safari, use el siguiente html.

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

Para otros que no sean safari,

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.webm" type="video/webm"></source>
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

Tuve el mismo problema: asegúrese de que la URL del recurso de video provenga de un dominio seguro. Nuestro entorno de desarrollo es http mientras que la producción es segura. Debido a que se hizo referencia al video a través de una ruta relativa, no estaba funcionando en el desarrollo. Parece ser un problema que Apple requiere que el video sea seguro ...

está funcionando, pero MacOs recientemente tiene una política de reproducción automática para el usuario: https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/ , resolví el mismo problema usando un botón para habilitar el sonido:

ejm:

<video autoplay loop muted id="myVideo">
  <source src="amazon.mp4" type="video/mp4">
  Sorry, your browser doesn't support embedded videos...
</video>

<button class="pausee" onclick="disableMute()" type="button">Enable sound</button>

<script>
var vid = document.getElementById("myVideo");
function disableMute() { 
  vid.muted = false;
}
</script>

Me he enfrentado al mismo problema. Porque el tamaño del fotograma de mi video era demasiado grande. es decir, Apple de 2248 px admite video H.264 Baseline Profile Level 3.0, hasta 640 x 480 a 30 fps. Tenga en cuenta que los fotogramas B no se admiten en el perfil de línea base. mira esto para más información

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 comienza a reproducir el video

Para mi caso de uso, hubo dos cosas :

1. No estaba usando la política del nuevo atributo / webkit playsinline ;
2. Mi video / tipo mimo o whathathell no estaba codificado correctamente, así que usé este sitio para convertirlo a todos los formatos que necesitaba: https://pt.converterpoint.com/

o /

Tuve exactamente el mismo problema, mi etiqueta de video HTML se reprodujo bien en Chrome y Mozilla, en Safari; aparecieron los controles pero el video estaba en blanco. Intenté jugar con todos los atributos anteriores, eliminar / agregar silenciado, playInline, etc. y nada funcionó. El problema también estaba en los servidores descritos aquí. Tuve esto - NO FUNCIONÓ:

<video 
  muted
  playsInline
  controls
  style={{ width: `100%` }}>
  <source src={MfMfVideo} type="video/mp4" />
  <source src={MfMfVideoWebM} type="video/webm" />
</video>

y acabo de mover mi video a una biblioteca externa y ahora estoy bien en Safari, FUNCIONA bien:

<video 
  muted
  playsInline
  controls 
  style={{ width: `100%` }}>
  <source src={"https://blabla.com/video/dixneuf-video_r8xuvc.mp4"} type="video/mp4" />
  <source src={"https://blabla.com/videodixneuf-video_gyquuu.webm"} type="video/webm" />
  Sorry, your browser doesn't support embedded videos.
</video>

Nada funcionó para mí, excepto comprimir el video a menos de 30 MB. Eso funcionó, pero con muy mala compresión.

Si alguien tiene el mismo problema, lo resolví habilitando el soporte Byte-Range en mi servidor. Parece que Safari requiere solicitudes de rango de bytes. En mi caso, uso NGINX y tuve que agregarlo proxy_force_ranges on;a mi archivo de configuración. ¡Gracias a esta respuesta !