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


134

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.


está funcionando algumas vezes? ou não está funcionando ... aqui está um exemplo w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay que eu verifico com o chrome e funciona.
tanaydin

Em algumas páginas, ele não está funcionando de forma alguma #
Adam Bubela 01/08

Enfrentando o mesmo problema, funcionou bem há uma semana e, sem qualquer alteração, parou de funcionar. Talvez seja uma atualização do navegador, muito chato ter que jogar manualmente todas as tags de vídeo via javascript
bingeScripter

Não está funcionando para mim no Chrome.
Bob the Builder

Respostas:


260

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>

1
Ou você pode codificar com jQuery $("videoID").get(0).play(); stackoverflow.com/questions/4646998/…
Penguin

8
Ou assim:$("video[autoplay]").each(function(){ this.play(); });
Martin

2
ainda problema se não estiver desativado developers.google.com/web/updates/2017/09/…
dovid

5
isso não funcionará mais sem a interação do usuário AFAIK
webkit 17/05


93

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.

3
Eu tive esse problema no Safari 11, em que um vídeo em segundo plano (sem áudio) não era reproduzido automaticamente. Adicionando mutede autoplayfez o truque. Obrigado!
dmbaughman

1
Então, por que, então, a reprodução automática, com o som ativado, funciona no youtube? Funcionou dessa maneira desde o início do site.
Xavier

32

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.


2
Boa ligação que não funciona com .wrap (). No entanto, até onde eu sei, o código precisa .get (0) para funcionar: $ ("# vid"). Get (0) .play ();
mattsoave

3
@mattsoave .get(0)ou apenas$('#vid')[0].play()
pmrotule

Em outubro de 2017, o vídeo que não é reproduzido automaticamente, apesar do atributo na tag, ainda é um problema no Safari. Usando [0] .play (), como sugerido por mattsoave / pmrotule, resolveu o problema.
Don Cullen

25

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>

Comentário de John Pallett sobre a nova política . Ele é gerente de produto do Google Chrome e Media Muter .
Doomjunky

24

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

Obras de mais recente Chrome no Windows8
vladkras

No Crome, se eu adicionar som desativado, desativado. Eu não quero isso
lisarko8077

17

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>

3
Isso não adiciona nada de novo. A resposta aceita já menciona isso. Também a segunda resposta entra em detalhes.
Samuel Philipp

12

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


O atributo preload é ignorado pelo navegador se a reprodução automática estiver presente.
Sedat Başar

9

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);

2
O motivo é porque você está esperando o vídeo ser carregado no buffer e depois o reproduz.
Joseph Briggs

9

Tente o seguinte:

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

5

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

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


3

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);

Nada funcionou no Chrome também funcionou para mim. Com a correção .play () (hack) acima, recebi uma "DOMException não capturada (prometida): A solicitação play () foi interrompida por uma chamada para pause ()." no console. Havia algumas outras funções do jQuery na página, então pensei que um cronômetro daria ao Chrome tempo suficiente para se resolver. Funcionou. Eu configurei um timer de 0,5 segundo em $ (document) .ready ()
de Orbonia

3

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.



2

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.


2

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

2

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;

1

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/


0

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.


0

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();
}

0

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.


0

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.