¿Puedes reproducir automáticamente videos HTML5 en el iPad?

123

El atributo de <video>etiquetas autoplay="autoplay"funciona bien en Safari.

Cuando se prueba en un iPad, el video debe activarse manualmente.

Pensé que era un problema de carga, así que ejecuté un bucle para verificar el estado de los medios:

videoPlay: function(){
    var me = this;
    console.log('STATE: ' + $("#periscopevideo").get(0).readyState);
    if ($("#periscopevideo").get(0).readyState != 4){
      setTimeout(function(){me.videoPlay();}, 300);
    }
    else {
      $("#periscopevideo").get(0).play();
    }
}

El estado permanece en 0el iPad. En mi safari de escritorio, pasa 0, 1y finalmente 4. En el iPad, solo llega 4si toco manualmente la flecha "reproducir".

Además, llamar $("#periscopevideo").get(0).play()desde un clic onClicktambién funciona.

¿Hay alguna restricción de Apple con respecto a la reproducción automática? (Estoy ejecutando iOS 5+ por cierto).

jquery  ios  objective-c  html  cocoa-touch 
— Jem
fuente
— apsillers
Tal vez deberíamos mirar la detección del navegador, y si debe llamar o no a playVideo (): stackoverflow.com/questions/26895492/…
— Redtopia
— dimitar
Blogpost útil sobre este tema: webkit.org/blog/6784/new-video-policies-for-ios
— Matthias M
opera mini en ios admite la reproducción automática de forma predeterminada, mientras que chrome, firefox y safari no tienen y no ofrecen opciones para activar.
— anónimo

Respuestas:

156

actualización de iOS 10

La prohibición de reproducción automática se levantó a partir de iOS 10, pero con algunas restricciones (por ejemplo, A se puede reproducir automáticamente si no hay una pista de audio).

Para ver una lista completa de estas restricciones, consulte los documentos oficiales: https://webkit.org/blog/6784/new-video-policies-for-ios/

iOS 9 y antes

A partir de iOS 6.1, ya no es posible reproducir automáticamente videos en el iPad.

¿Supongo por qué han deshabilitado la función de reproducción automática?

Bueno, como muchos propietarios de dispositivos tienen límites de uso de datos / ancho de banda en sus dispositivos, creo que Apple sintió que el propio usuario debería decidir cuándo iniciar el uso de ancho de banda.

Después de un poco de investigación, encontré el siguiente extracto en la documentación de Apple con respecto a la reproducción automática en dispositivos iOS para confirmar mi suposición:

"Apple ha tomado la decisión de deshabilitar la reproducción automática de video en dispositivos iOS, a través de implementaciones de script y atributos.

En Safari, en iOS (para todos los dispositivos, incluido 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 desactivadas. No se cargan datos hasta que el usuario los inicia. "- Documentación de Apple.

Aquí hay una advertencia separada presentada en la página de referencia HTML5 de Safari sobre por qué los medios integrados no se pueden reproducir en Safari en iOS:

Advertencia : para evitar descargas no solicitadas a través de redes celulares a expensas del usuario, los medios integrados no se pueden reproducir automáticamente en Safari en iOS; el usuario siempre inicia la reproducción. Una vez que se inicia la reproducción, se suministra automáticamente un controlador en iPhone o iPod touch, pero para iPad debe configurar el atributo de controles o proporcionar un controlador mediante JavaScript.

Lo que esto significa (en términos de código) es que los métodos play()y Javascript load()están inactivos hasta que el usuario inicia la reproducción, a menos que el método play()o load()sea ​​activado por una acción del usuario (por ejemplo, un evento de clic).

Básicamente, un botón de reproducción iniciado por el usuario funciona, pero un onLoad="play()"evento no.

Por ejemplo, esto reproduciría la película: 

<input type="button" value="Play" onclick="document.myMovie.play()">

Mientras que lo siguiente no haría nada en iOS: 

<body onload="document.myMovie.play()">
— dsgriffin
fuente
1
¡Hmmm 3 meses de crear un despertador en línea para iPhone Safari por el desagüe! Nosotros (sleep.fm) descubrimos una manera de mantener el teléfono despierto mientras la aplicación está abierta, pero ahora con iOS 6.1 no se reproducirá el audio de la alarma. Funcionó bien en iOS 6.0. ¿Hay alguna solución?
— chaser7016
1
oh, espera, tenemos nuestro reloj despertador web móvil (sleep.fm) para iPhone Safari funcionando nuevamente, así que hay soluciones para la falta de soporte de reproducción automática html5.
— chaser7016
1
@ Jonah1289 De acuerdo con la publicación de su blog en Sleep.fm Brian Cavalier tuiteó un enlace de github con el siguiente título Autoplay audio en el ipad o iphone usando webkitaudiocontext en lugar de la etiqueta de audio Podría ser un buen lugar para comenzar.
— Francisco
1
Más detalles, por favor: ¿qué soluciones específicas existen por la falta de compatibilidad con la reproducción automática?
— Umopepisdn
11
Lo que deberían hacer es permitir la reproducción automática cuando esté en wifi, y tener reproducción manual o avisar al usuario que el video desea reproducir automáticamente cuando está en una red móvil.
— Ric
16

Quiero comenzar diciendo que me doy cuenta de que esta pregunta es antigua y ya tiene una respuesta aceptada; pero, como un desafortunado usuario de Internet que utilizó esta pregunta como un medio para terminar, solo se demostró que estaba equivocado poco después (pero no antes de molestar un poco a mi cliente) quiero agregar mis pensamientos y sugerencias.

Si bien @DSG y @Giona son correctas, y sus respuestas no tienen nada de malo, existe un mecanismo creativo que puede emplear para "moverse", por así decirlo, esta limitación. Eso no quiere decir que tolere eludir esta función, sino todo lo contrario, pero solo algunos mecanismos para que un usuario todavía "sienta" como si un archivo de video o audio se "reprodujera automáticamente".

La solución rápida es ocultar una etiqueta de video en algún lugar de la página móvil, ya que construí un sitio receptivo, solo hago esto para pantallas más pequeñas. La etiqueta de video (ejemplos HTML y jQuery):

HTML

<video id="dummyVideo" src="" preload="none" width="1" height="2"></video>

jQuery

var $dummyVideo = $("<video />", {
  id: "dummyVideo",
  src: "",
  preload: "none",
  width: "1",
  height: "2"
});

Con eso oculto en la página, cuando un usuario "hace clic" para ver una película (aún la interacción del usuario, no hay forma de evitar ese requisito) en lugar de navegar a una página secundaria, cargo el video oculto. Esto funciona principalmente porque la etiqueta de medios no se usa realmente, sino que se promociona a una instancia de Quicktime, por lo que no es necesario tener un elemento de video visible. En el controlador de "clic" (o "touchend" en el móvil).

$(".movie-container").on("click", function() {
  var url = $(this).data("stream-url");
  $dummyVideo.attr("src", url);
  $dummyVideo.get(0).load(); // required if src changed after page load
  $dummyVideo.get(0).play();
});

Y viola. En lo que respecta a UX, un usuario hace clic en un video para reproducirlo y Quicktime abre la reproducción del video que eligió. Esto permanece dentro de la limitación de que los videos solo se pueden reproducir a través de la acción del usuario, por lo que no estoy forzando datos sobre nadie que no decida ver un video con este servicio. Descubrí esto cuando traté de descubrir cómo exactamente Youtube logró esto con su dispositivo móvil, que es esencialmente una construcción de página JavaScript realmente agradable y un elemento elegante que se esconde como en el caso de la etiqueta de video.

tl; dr Aquí hay una "solución" para intentar crear una función de UX de "reproducción automática" en dispositivos iOS sin exceder las limitaciones de Apple y hacer que los usuarios decidan si quieren ver un video (o un audio similar, aunque yo no se han probado) sin tener uno cargado sin su permiso.

Además, para la persona que comentó que es de sleep.fm, esto desafortunadamente aún no habría sido una solución a sus problemas, que es la reproducción de audio basada en el tiempo.

Espero que alguien encuentre útil esta información, me habría ahorrado una semana de malas noticias entregadas a un cliente que estaba convencido de que tienen esta característica y me alegré de encontrar una forma de entregarla al final.

EDITAR

Otros hallazgos indican que la solución anterior es solo para dispositivos iPhone / iPod. El iPad reproduce video en Safari antes de que se haya proyectado por completo, por lo que necesitará algún mecanismo para cambiar el tamaño del video al hacer clic antes de reproducirlo o, de lo contrario, terminará con audio y sin video.

— Brandon Buck
fuente
2
Sería mejor usarlo en $dummyVideo.get(0)lugar de corchetes, por lo que jQuery puede fallar con gracia si su selección está vacía.
— Micros
12

Solo establece

webView.mediaPlaybackRequiresUserAction = NO;

La reproducción automática funciona para mí en iOS.

— Er Li
fuente
29
Esto no funciona para un sitio web, solo funciona para sitios donde los ha envuelto con una aplicación nativa.
— Brandon Buck
55
Quiero decir, desde una página web (como se hace la pregunta) esto es algo completamente inaccesible: sí, Javascript en un navegador no puede hacer esto. Esto solo funciona si ejecuta su sitio dentro de un WebView desde una aplicación que tiene control, por lo que realmente no proporciona una solución a la pregunta.
— Brandon Buck
66
@izuriel para ser justos, que hizo la pregunta con la etiqueta "Objective-C" y "cacao toque", por lo que no es tan descabellado suponer que está utilizando una vista web
— Kloar
3
Las etiquetas de @Kloar generalmente se agregan como un medio para llamar más la atención o un malentendido general del problema que están tratando de resolver. La persona que hizo la pregunta puede haber pensado que mencionar el objetivo-c era lo mismo que decir "iOS" (y similar para el toque de cacao). Sin embargo, la etiqueta "uiwebview" no aparece en la lista, así que la excluiría como una opción viable. La pregunta menciona el uso de Safari en computadoras de escritorio y iPad (nada sobre una aplicación) y usa códigos de demostración de Javascript para depurar la situación. En general, diría que es más seguro que esta pregunta realmente estaba buscando soluciones web, no nativas.
— Brandon Buck
— cottonBallPaws
11

A partir de iOS 10, los videos ahora pueden reproducirse automáticamente, pero solo están silenciados o no tienen pista de audio. ¡Hurra!

En breve:

  • <video autoplay> Los elementos ahora respetarán el atributo de reproducción automática, para los elementos que cumplan las siguientes condiciones:
    • <video> los elementos podrán reproducirse 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 se silencia 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 a la ventana gráfica, se hacen visibles a través de CSS y se insertan en el DOM.
    • <video autoplay> los elementos se pausarán si se vuelven no visibles, como al desplazarse fuera de la ventana gráfica.

Más información aquí: https://webkit.org/blog/6784/new-video-policies-for-ios/

— JackKalish
fuente
44
El atributo de reproducción automática solo funciona en PC, no funciona en dispositivos móviles. He intentado muchas veces.
— huykon225
7

En esta referencia de Safari HTML5 , puede leer

Para evitar descargas no solicitadas a través de redes celulares a expensas del usuario, los medios integrados no se pueden reproducir automáticamente en Safari en iOS; el usuario siempre inicia la reproducción. Una vez que se inicia la reproducción, se suministra automáticamente un controlador en iPhone o iPod touch, pero para iPad debe configurar el atributo de controles o proporcionar un controlador mediante JavaScript.

— Giona
fuente
38
"aparte de los archivos GIF que pueden tener varios MB y usar ancho de banda sin que la gente se dé cuenta"
— Simon_Weaver
@Simon_Weaver x12 veces para que la mayoría de las veces sea precisa.
— Burak Tokak
2

Deje que el video se silencie primero para garantizar la reproducción automática en ios, luego active el silencio si lo desea.

<video autoplay loop muted playsinline>
  <source src="video.mp4?123" type="video/mp4">
</video>

<script type="text/javascript">
$(function () {
  if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $("video").prop('muted', false);
  }
});
</script>
— Mohammad Ali Akbari
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.