Saltar al contenido

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

Te sugerimos que pruebes esta respuesta en un entorno controlado antes de enviarlo a producción, saludos.

Solución:

actualización de iOS 10

La prohibición de la reproducción automática se ha levantado 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 anteriores

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

¿Mi suposición de 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 del ancho de banda.


Después de investigar un poco, 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 secuencias de comandos y attribute implementaciones.

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.“- Documentación de Apple.

Aquí hay una advertencia separada que aparece en el Página de referencia de 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 móviles por cuenta del usuario, los medios integrados no se pueden reproducir automáticamente en Safari en iOS; el usuario siempre inicia la reproducción. Un controlador se suministra automáticamente en el iPhone o iPod touch una vez que se inicia la reproducción, pero para iPad debe configurar los controles attribute o proporcionar un controlador mediante JavaScript.


Lo que esto significa (en términos de código) es que Javascript play() y load() los métodos están inactivos hasta que el usuario inicia la reproducción, a no ser que los play() o load() El método se activa mediante la 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()" el evento no lo hace.

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


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


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 usó esta pregunta como un medio para terminar solo para que se demuestre que estaba equivocado poco después (pero no antes de que molestara un poco a mi cliente), quiero agregar mis pensamientos y sugerencias.

Si bien @DSG y @Giona tienen razón, y sus respuestas no tienen nada de malo, existe un mecanismo creativo que puede emplear para “sortear”, por así decirlo, esta limitación. Eso no quiere decir que esté tolerando la elusión de esta función, todo lo contrario, sino solo algunos mecanismos para que el usuario todavía “sienta” como si un archivo de video o audio se estuviera “reproduciendo 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 creé un sitio receptivo, solo hago esto para pantallas más pequeñas. La etiqueta de video (ejemplos de HTML y jQuery):

HTML


jQuery

var $dummyVideo = $("

Con eso oculto en la página, cuando un usuario “hace clic” para ver una película (aún hay interacción del usuario, no hay forma de evitar ese requisito) en lugar de navegar a una página de visualización secundaria, cargo el video oculto. Esto funciona principalmente porque la etiqueta de medios no se usa realmente, sino que se promueve a una instancia de Quicktime, por lo que no es necesario tener un elemento de video visible. En el controlador para “hacer clic” (o “tocar” 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 reproducir 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 a nadie que no esté decidiendo ver un video con este servicio. Descubrí esto cuando trataba de averiguar cómo exactamente Youtube logró esto con su dispositivo móvil, que es esencialmente una creación de página de Javascript realmente agradable y un elemento elegante que se oculta como en el caso de la etiqueta de video.

tl; dr Aquí hay una “solución alternativa” para intentar crear una función de UX de “reproducción automática” en dispositivos iOS sin ir más allá de las limitaciones de Apple y aún así hacer que los usuarios decidan si quieren ver un video (o audio más parecido, 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, desafortunadamente, esto 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 hubiera ahorrado una semana de envío de malas noticias a un cliente que estaba convencido de que tenían esta función y me alegré de encontrar una manera de entregarla al final.

EDITAR

Los hallazgos adicionales 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.

Solo configurar

webView.mediaPlaybackRequiresUserAction = NO;

La reproducción automática me funciona en iOS.

Si para ti ha sido útil este post, sería de mucha ayuda si lo compartieras con más juniors así nos ayudas a dar difusión a este contenido.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *