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

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

— 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

Aleluia! Obrigado por isso, havia tentado uma dúzia de outras soluções sem sucesso.

— Tolmark

playsinlinefuncionou para mim, mutedtendo em mente a peculiaridade do modo de baixo consumo de energia no iPhone

— Ken

Esta é a resposta.

— JCraine

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

Se você estiver usando Reagir, nota que o atributo playsinlinedeve ser escrito em camelCase: playsInline. Caso contrário, não funcionará.

— Quentin D

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

ótima dica, mas eu tenho uma pergunta sobre isso que enviei: stackoverflow.com/questions/50400902/…

— Mathieu

Passei a última hora ou mais tentando entender por que meus vídeos não eram reproduzidos automaticamente. Obrigado por isso!

— Iior

Obrigado por isso!

— Nikita Rogatnev

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

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

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:

Verifique se o vídeo está sendo reproduzido ou não.
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