Reprodução automática de vídeo HTML5 no iPhone

88

Eu tenho algum tipo de problema estranho. Tento criar um site com um vídeo de fundo em loop. O código é parecido com este:

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

Isso funciona perfeitamente bem na maioria dos navegadores (o IE tem problemas com esse ajuste de objeto, mas eu não me importo), mas no iPhone o vídeo não é reproduzido automaticamente, mas no iPad sim. Já li as Novas Políticas para iOS e acho que atendi aos requisitos (caso contrário, o iPad não reproduzirá automaticamente). Eu fiz alguns outros testes:

  • Remover divs sobrepostos não corrigirá o problema
  • A remoção do Z-index não corrige o problema
  • Wifi ou celular não fazem diferença
  • O tamanho do arquivo de vídeo também não faz diferença

Estou fazendo isso errado ou o iPhone simplesmente não reproduz vídeos automaticamente e sempre requer interação? Eu só me importo com o iOS 10, sei que os requisitos eram diferentes no iOS 9

ios html video webkit autoplay SeBa
fonte
Você pode encontrar ajuda aqui: stackoverflow.com/questions/41360490/… Pessoalmente, ainda não recebi nenhum vídeo para reprodução automática em um iphone, mesmo depois de seguir todas essas dicas e políticas da Apple.
Marcos
Levei horas para descobrir. Para tentar economizar horas de todos os outros, resumi minhas descobertas em um blog. Espero que ajude. medium.com/@BoltAssaults/…
BoltCoder

Respostas:

214

O playsinlineatributo ajuda?

Aqui está o que eu tenho:

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

Veja o comentário playsinlineaqui: https://webkit.org/blog/6784/new-video-policies-for-ios/

Pete Florence
fonte
1
Aleluia! Obrigado por isso, havia tentado uma dúzia de outras soluções sem sucesso.
Tolmark
23
playsinlinefuncionou para mim, mutedtendo em mente a peculiaridade do modo de baixo consumo de energia no iPhone
Ken
1
Esta é a resposta.
JCraine
1
playsinlineSalvei o dia !!!! Obrigado cara. A propósito, as novas políticas do navegador exigem que, se você quiser iniciar um vídeo automaticamente, inicie-o sem som ou não será capaz de fazê-lo. +1 para @ken Exemplo para cromo: [ developers.google.com/web/updates/2017/09/…
Nuno Prata
18
Se você estiver usando Reagir, nota que o atributo playsinlinedeve ser escrito em camelCase: playsInline. Caso contrário, não funcionará.
Quentin D
62

Os iOs 10+ permitem a reprodução automática de vídeo em linha. mas você tem que desligar o "Modo de baixo consumo" no seu iPhone.

Dilip Godhani
fonte
2
ótima dica, mas eu tenho uma pergunta sobre isso que enviei: stackoverflow.com/questions/50400902/…
Mathieu
7
Passei a última hora ou mais tentando entender por que meus vídeos não eram reproduzidos automaticamente. Obrigado por isso!
Iior
2
Obrigado por isso!
Nikita Rogatnev
4
Vale ressaltar que não podemos controlar o dispositivo do usuário e desligar o modo de baixo consumo. A única coisa que podemos fazer é solicitar ao usuário "Desligue o modo de baixo consumo de energia" para ter uma experiência melhor
Muhammad Osama
1
Aconteceu comigo também e me deixou louco até que encontrei sua postagem. Eu já estava olhando para as especificações do Safari 11 e 11.1 se eles desabilitaram completamente a reprodução automática, mas era apenas o modo de baixo consumo de energia ... a vida de um desenvolvedor pode ser difícil. :-)
haeki
7

Aqui está o pequeno hack para superar todas as dificuldades que você enfrenta para a reprodução automática de vídeos em um site:

  1. Verifique se o vídeo está sendo reproduzido ou não.
  2. Acione a reprodução de vídeo em eventos como um clique ou toque corporal.

Observação: alguns navegadores não permitem a reprodução automática dos vídeos, a menos que o usuário interaja com o dispositivo.

Portanto, os scripts para verificar se o vídeo está sendo reproduzido são: 

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

E então você pode simplesmente reproduzir automaticamente o vídeo anexando ouvintes de eventos ao corpo:

$('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: o autoplayatributo é muito básico e precisa ser adicionado à tag de vídeo, exceto esses scripts.

Você pode ver o exemplo de trabalho com código aqui neste link:

Como reproduzir automaticamente o vídeo quando o dispositivo está no modo de baixa energia / modo de economia de dados / problema do navegador safari

Shakti
fonte