A reprodução automática de vídeo não está funcionando no navegador de desktop Safari e Chrome

Passei muito tempo tentando descobrir por que o vídeo incorporado como aqui:

<video height="256" loop autoplay muted controls id="vid">
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

começa a tocar automaticamente quando a página é carregada no FireFox, mas não pode ser reproduzida automaticamente em navegadores baseados no Webkit. Isso aconteceu apenas em algumas páginas aleatórias. Até agora não consegui encontrar a causa. Eu suspeito que algumas tags não fechadas ou extensas JS criadas pelos editores do CMS.

A melhor solução que consegui foi adicionar esse código logo após o </video>

<script>
    document.getElementById('vid').play();
</script>

... não é bonito, mas de alguma forma funciona.

ATUALIZAÇÃO Recentemente, muitos navegadores só podem reproduzir automaticamente os vídeos com o som desativado, portanto, você também precisará adicionar mutedatributo à tag de vídeo

<video autoplay muted>
...
</video>

Depois de usar a play()manipulação de jQuery ou DOM, conforme sugerido pelas outras respostas, ele ainda não estava funcionando (o vídeo não estava sendo reproduzido automaticamente) no Chrome para Android (versão 56.0).

De acordo com esta postagem em developers.google.com , no Chrome 53, a opção de reprodução automática é respeitada pelo navegador, se o vídeo estiver desativado .

Portanto, o uso de autoplay mutedatributos na tag de vídeo permite que o vídeo seja reproduzido automaticamente nos navegadores Chrome a partir da versão 53.

Trecho do link acima:

Autoplay silenciado para vídeo é suportado pelo Chrome para Android a partir da versão 53. A reprodução iniciará automaticamente por um elemento de vídeo, uma vez que entra em vista, se tanto autoplaye mutedsão definidas [...]

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

• A reprodução automática desativada é suportada pelo Safari no iOS 10 e posterior.
• A reprodução automática, desativada ou não, já é suportada no Android pelo Firefox e pelo UC Browser: eles não bloqueiam nenhum tipo de reprodução automática.

Acontece que o Safari e o Chrome no Desktop não gostam da manipulação do DOM na tag do vídeo. Eles não acionarão a ordem de reprodução quando o atributo de reprodução automática estiver definido, mesmo que o evento canplaythrough tenha sido disparado quando o DOM em torno da tag do vídeo for alterado após o carregamento inicial da página. Basicamente, tive o mesmo problema até excluir um jQuery .wrap () em torno da tag do vídeo e depois reproduzir automaticamente conforme o esperado.

O Google acabou de mudar sua política de reprodução automática de vídeos, tem que ser muted

Você pode conferir aqui

então basta adicionar silenciado

<video height="256" loop="true" autoplay="autoplay" controls="controls" id="vid" muted>
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

Para mim, o problema era que o mutedatributo precisava ser adicionado à videotag. Ou seja:

<video width="1920" height="1980" src="video/Night.mp4"
type="video/mp4" frameborder="0" allowfullscreen autoplay loop
muted></video>`

O Chrome não permite a reprodução automática de vídeo com som ativado. Portanto, adicione mutedatributos à videotag como esta

<video width="320" height="240"  autoplay muted>
  <source src="video.mp4" type="video/mp4">
</video>

Acabei de receber o mesmo problema com o meu vídeo

<video preload="none" autoplay="autoplay" loop="loop">
  <source src="Home_Teaser.mp4" type="video/mp4">
  <source src="Home_Teaser" type="video/webm">
  <source src="Home_Teaser.ogv" type="video/ogg">
</video>

Após a pesquisa, encontrei uma solução:

Se eu definir os atributos "preload" como "true", o vídeo começará normalmente

Adicionar o código abaixo na parte inferior da página funcionou para mim. Não sei por que funciona :(

 setTimeout(function(){
     document.getElementById('vid').play();
 },1000);

Tente o seguinte:

  <video width="320" height="240"  autoplay muted>
            <source src="video.mp4" type="video/mp4">
  </video>

var video = document.querySelector('video'); video.muted = true; video.play()

Somente essa solução me ajudou, <video autoplay muted ...>...</video>não funcionou ...

Nenhuma das outras respostas funcionou para mim. Minha solução alternativa foi acionar um clique no próprio vídeo; hacky (por causa do tempo limite necessário), mas funciona bem:

function startVideoIfNotStarted () {
    $(".id_of_video_tag").ready(function () {
        window.setTimeout(function(){
            videojs("id_of_video_tag").play()
        }, 1000);
    });
}
$(startVideoIfNotStarted);

Recentemente, resolvemos um problema semelhante com um vídeo incorporado e descobrimos que os atributos de reprodução automática e sem áudio não eram suficientes para nossa implementação.

Adicionamos um terceiro atributo "playsinline" ao código e ele corrigiu o problema para usuários do iOS.

Essa correção é específica para vídeos que devem ser reproduzidos em linha. De https://webkit.org/blog/6784/new-video-policies-for-ios/ :

No iPhone, agora os elementos poderão ser reproduzidos em linha e não entrarão automaticamente no modo de tela cheia quando a reprodução começar. elementos sem atributos de reprodução em linha continuarão a exigir o modo de tela cheia para reprodução no iPhone. Ao sair da tela cheia com um gesto de pinça, os elementos sem reprodução em linha continuarão sendo reproduzidos em linha.

Política de reprodução automática atualizada do Google. A reprodução automática funciona apenas no modo mudo. Verifique o link https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Tente o seguinte:

    <video height="256" loop autoplay controls id="vid">
     <source type="video/mp4" src="video_file.mp4"></source>
     <source type="video/ogg" src="video_file.ogg"></source>

É assim que eu normalmente faço. loop, controles e reprodução automática não exigem um valor, eles são atributos booleanos.

Isso ocorre porque agora o chrome está impedindo a reprodução automática em vídeo html5; portanto, por padrão, eles não permitem a reprodução automática. para que possamos alterar essas configurações usando as configurações do sinalizador de cromo. isso não é possível para o caso normal, então eu encontrei outra solução. isso está funcionando perfeitamente ... (add preload = "auto")

<video autoplay preload="auto" loop="loop" muted="muted" id="videoBanner" class="videoBanner">
<source src="banner-video.webm" type="video/webm">
<source src="banner-video.mp4" type="video/mp4">
<source src="banner-video.ogg" type="video/ogg">

var herovide = document.getElementById('videoBanner');
       herovide.autoplay=true;
       herovide.load();  

Passei duas horas tentando todas as soluções mencionadas acima.

Isto é o que finalmente funcionou para mim:

var vid = document.getElementById("myVideo");
vid.muted = true;

No iPhone do safari, quando o amanteigado está baixo e o iphone está no modo de baixa energia, ele não será reproduzido automaticamente, mesmo se você tiver os seguintes atributos: reprodução automática, loop, silenciado, reprodução em linha definida na tag html do vídeo.

Por aí, achei que trabalhar é ter um evento de gestos do usuário para acionar a reprodução de vídeo:

document.body.addEventListener("touchstart", function () {
    var allVideos = document.querySelectorAll('video');
    for (var i = 0; i < allVideos.length; i++) {
        allVideos[i].play();
    }
},{ once: true });

você pode ler mais sobre o gesto do usuário e as Políticas de vídeo para iOS no site do kit:

https://webkit.org/blog/6784/new-video-policies-for-ios/

Eu tive um caso em que isso tinha algo a ver com a ordem dos diferentes tipos de arquivos. Tente mudar e veja se isso ajuda.

Comecei a reproduzir todos os vídeos visíveis, mas os telefones antigos não estavam funcionando bem. Então, neste momento, reproduzo o vídeo mais próximo do centro da janela e faço uma pausa no resto. JS de baunilha. Você pode escolher qual algoritmo prefere.

//slowLooper(playAllVisibleVideos);
slowLooper(playVideoClosestToCenter);

function isVideoPlaying(elem) {
    if (elem.paused || elem.ended || elem.readyState < 2) {
        return false;
    } else {
        return true;
    }
}
function isScrolledIntoView(el) {
    var elementTop = el.getBoundingClientRect().top;
    var elementBottom = el.getBoundingClientRect().bottom;
    var isVisible = elementTop < window.innerHeight && elementBottom >= 0;
    return isVisible;
}
function playVideoClosestToCenter() {
    var vids = document.querySelectorAll('video');
    var smallestDistance = null;
    var smallestDistanceI = null;
    for (var i = 0; i < vids.length; i++) {
        var el = vids[i];
        var elementTop = el.getBoundingClientRect().top;
        var elementBottom = el.getBoundingClientRect().bottom;
        var elementCenter = (elementBottom + elementTop) / 2.0;
        var windowCenter = window.innerHeight / 2.0;
        var distance = Math.abs(windowCenter - elementCenter);
        if (smallestDistance === null || distance < smallestDistance) {
            smallestDistance = distance;
            smallestDistanceI = i;
        }
    }
    if (smallestDistanceI !== null) {
        vids[smallestDistanceI].play();
        for (var i = 0; i < vids.length; i++) {
            if (i !== smallestDistanceI) {
                vids[i].pause();
            }
        }
    }
}
function playAllVisibleVideos(timestamp) {
    // This fixes autoplay for safari
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length; i++) {
        if (isVideoPlaying(vids[i]) && !isScrolledIntoView(vids[i])) {
            vids[i].pause();
        }
        if (!isVideoPlaying(vids[i]) && isScrolledIntoView(vids[i])) {
            vids[i].play();
        }
    }
}
function slowLooper(cb) {
    // Throttling requestAnimationFrame to a few fps so we don't waste cpu on this
    // We could have listened to scroll+resize+load events which move elements
    // but that would have been more complicated.
    function repeats() {
        cb();
        setTimeout(function() {
            window.requestAnimationFrame(repeats);
        }, 200);
    }
    repeats();
}

Eu resolvi o mesmo problema com,

$(window).on('pageshow',function(){
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length;){
        vids[i].play();
    }
})

Você precisa iniciar os vídeos depois que a página for exibida.

Tente trocar autoPlaypor autoplay.

Parece ser sensível a maiúsculas às vezes. Muito bizarro porque funcionou como autoplaypara mim, mas somente se eu incluíssecontrols