Reproducción automática de video HTML5 en iPhone

88

Tengo una especie de problema extraño. Intento crear un sitio web con un video de fondo en bucle. El código se parece a este:

<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>
Expandir fragmento

Esto funciona perfectamente bien en la mayoría de los navegadores (IE tiene problemas con este ajuste de objetos, pero no me importa) pero en iPhone el video no se reproduce automáticamente pero en iPad sí. Ya leí las nuevas políticas para iOS y creo que cumplo con los requisitos (de lo contrario, el iPad no se reproducirá automáticamente). Hice algunas otras pruebas:

  • Eliminar divs superpuestos no lo solucionará
  • Eliminar el índice z no lo solucionará
  • Wifi o celular no hace la diferencia
  • El video tampoco marca la diferencia

¿Lo estoy haciendo mal o el iPhone simplemente no reproduce videos automáticamente y siempre requiere interacción? Solo me preocupo por iOS 10, sé que los requisitos eran diferentes en iOS 9

ios html video webkit autoplay SeBa
fuente
Es posible que pueda encontrar ayuda aquí: stackoverflow.com/questions/41360490/… Personalmente, todavía no he obtenido ningún video para reproducir automáticamente en un iPhone, incluso después de seguir todos esos consejos y políticas de Apples.
Mark
Me tomó horas darme cuenta. Para tratar de ahorrar horas a todos los demás, resumí mis hallazgos en un blog. Espero eso ayude. medium.com/@BoltAssaults/…
BoltCoder

Respuestas:

214

¿ playsinlineAyuda el atributo?

Esto es lo que tengo:

<video autoplay loop muted playsinline class="video-background ">
  <source src="videos/intro-video3.mp4" type="video/mp4">
</video>

Vea el comentario playsinlineaquí: https://webkit.org/blog/6784/new-video-policies-for-ios/

Pete Florencia
fuente
1
¡Aleluya! Gracias por esto, había intentado alrededor de una docena de otras soluciones sin éxito.
Marcar el
23
playsinlinefuncionó para mí junto con mutedtener en cuenta la peculiaridad del modo de bajo consumo en el iPhone
Ken
1
Esta es la respuesta.
JCraine
1
playsinline¡¡¡¡Salvó el día!!!! Gracias hombre. Por cierto, las nuevas políticas del navegador exigen que si desea iniciar automáticamente un video, comience en silencio o no podrá hacerlo. +1 a @ken Ejemplo para Chrome: [ developers.google.com/web/updates/2017/09/…
Nuno Prata
18
Si está utilizando Reaccionar, nota que el atributo playsinlinedebe estar escrito en camelCase: playsInline. De lo contrario, no funcionará.
Quentin D
62

iOs 10+ permite la reproducción automática de video en línea. pero tienes que desactivar el "Modo de bajo consumo" en tu iPhone.

Dilip Godhani
fuente
2
gran consejo, pero tengo una pregunta sobre esto que envié
Mathieu
7
Pasé la última hora tratando de entender por qué mis videos no se reproducían automáticamente. ¡Gracias por esto!
lior
2
¡Gracias por esto!
Nikita Rogatnev
4
Vale la pena mencionar que no podemos controlar el dispositivo del usuario y activar el modo de bajo consumo. Lo único que podemos hacer es pedirle al usuario que "Desactive el modo de bajo consumo" para tener una mejor experiencia
Muhammad Osama
1
A mí también me pasó y me volvió loco hasta que encontré tu puesto. Ya estaba mirando las especificaciones de Safari 11 y 11.1 si tal vez deshabilitaran completamente la reproducción automática, pero era solo el modo de bajo consumo ... la vida de un desarrollador puede ser difícil. :-)
haeki
7

Aquí está el pequeño truco para superar todas las luchas que tiene para la reproducción automática de videos en un sitio web:

  1. Verifique que el video se esté reproduciendo o no.
  2. Activa la reproducción de video en eventos como un clic o un toque corporal.

Nota: algunos navegadores no permiten que los videos se reproduzcan automáticamente a menos que el usuario interactúe con el dispositivo.

Entonces, los guiones para verificar si el video se está reproduciendo son: 

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});

Y luego simplemente puede reproducir automáticamente el video adjuntando oyentes de eventos al cuerpo:

$('body').on('click touchstart', function () {
        const videoElement = document.getElementById('home_video');
        if (videoElement.playing) {
            // video is already playing so do nothing
        }
        else {
            // video is not playing
            // so play video now
            videoElement.play();
        }
});

Nota: el autoplayatributo es muy básico y debe agregarse a la etiqueta de video ya que no son estos scripts.

Puede ver el ejemplo de trabajo con código aquí en este enlace:

Cómo reproducir video automáticamente cuando el dispositivo está en modo de bajo consumo / modo de ahorro de datos / problema con el navegador Safari

Shakti
fuente