jquery - playsinline attribute

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

Question

El atributo <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 ciclo 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 0 en el iPad. En mi safari de escritorio, pasa por 0 , 1 y finalmente 4 . En el iPad, solo llega a 4 si toco manualmente la flecha "reproducir".

Además, al llamar a $("#periscopevideo").get(0).play() desde un clic a través de onClick también funciona.

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

Answer 1

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

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

Answer 2

Deje que el video se silencia primero para garantizar la reproducción automática en ios, luego vuelva a silenciarlo 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>

Answer 3

En esta referencia de Safari HTML5 , puedes leer

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

Answer 4

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

Si bien @DSG y @Giona son correctos, y no hay nada de malo en sus respuestas, existe un mecanismo creativo que puede emplear para "moverse", por así decirlo, esta limitación. Eso no significa que tolero la elusión de esta característica, sino todo lo contrario, pero solo algunos mecanismos para que el usuario aún "sienta" como si un video o archivo de audio estuviera "reproduciendo automáticamente".

El rápido trabajo 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 de 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 mirar una película (la interacción del usuario sigue siendo inmóvil, no hay manera de evitar ese requisito) en lugar de navegar a una página de vigilancia secundaria, carga 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 "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 reproducir y Quicktime abre la reproducción del video que eligió. Esto se mantiene 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 forzaré la información de nadie que no esté decidiendo ver un video con este servicio. Descubrí esto cuando trato de averiguar cómo exactamente Youtube logró esto con su teléfono móvil, que es esencialmente una construcción de página de JavaScript realmente bonita y un elemento de fantasía escondido como en el caso de la etiqueta de video.

tl; dr Aquí hay una solución para intentar crear una característica UX de "reproducción automática" en dispositivos iOS sin ir más allá de las limitaciones de Apple y que los usuarios decidan si quieren ver un video (o el audio más parecido, aunque yo no he probado) ellos mismos sin tener uno solo cargado sin su permiso.

Además, para la persona que comentó que es de sleep.fm, esto desafortunadamente 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 entrega de malas noticias a un cliente que insistió en que tienen esta característica y me alegré de encontrar la forma de entregarla al final.

EDITAR

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

Answer 5

Solo establece

webView.mediaPlaybackRequiresUserAction = NO;

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

Answer 6

Actualización de iOS 10

La prohibición de la reproducción automática se ha eliminado a partir de iOS 10, pero con algunas restricciones (por ejemplo, A puede reproducirse 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 videos en el iPad.

¿Mi suposición de por qué han desactivado 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 consideró que el usuario debería decidir cuándo inicia 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 con iOS para confirmar mi suposición:

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

Aquí hay una advertencia separada que aparece en la página Safari HTML5 Reference sobre por qué los medios incrustados 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. Un controlador se suministra automáticamente en iPhone o iPod touch una vez que se inicia la reproducción, pero para iPad debe establecer el atributo de controles o proporcionar un controlador usando JavaScript.

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

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

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