it-swarm-pt.tech

Como manipular "Uncaught (in promise) DOMException: play () falhou porque o usuário não interagiu com o documento primeiro." na área de trabalho com o Chrome 66?

Estou recebendo a mensagem de erro ..

Uncaught (in promise) DOMException: play () falhou porque o usuário não interagiu com o documento primeiro.

..quando tentando reproduzir vídeo no desktop usando o Chrome versão 66.

Eu encontrei um anúncio que começou a reprodução automaticamente em um site usando o seguinte HTML:

<video
    title="Advertisement"
    webkit-playsinline="true"
    playsinline="true"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://ds.serving-sys.com/BurstingRes/Site-2500/Type-16/1ff26f6a-aa27-4b30-a264-df2173c79623.mp4"
    autoplay=""></video>

Então, ignorar o bloqueador de reprodução automática do Chrome v66 é tão fácil quanto adicionar os atributos webkit-playsinline="true", playsinline="true" e autoplay="" ao elemento <video>? Existem consequências negativas para isso?

52
Steven

Para que a reprodução automática nas tags html 5 funcione após a atualização do chrome 66, você só precisa adicionar a propriedade muted à tag de vídeo.

Então, seu HTML de vídeo atual 

<video
    title="Advertisement"
    webkit-playsinline="true"
    playsinline="true"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://ds.serving-sys.com/BurstingRes/Site-2500/Type-16/1ff26f6a-aa27-4b30-a264-df2173c79623.mp4"
    autoplay=""></video>

Apenas precisa de muted="muted"

<video
    title="Advertisement"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://ds.serving-sys.com/BurstingRes/Site-2500/Type-16/1ff26f6a-aa27-4b30-a264-df2173c79623.mp4"
    autoplay="true"
    muted="muted"></video>

Eu acredito que a atualização do chrome 66 está tentando parar as abas criando ruído aleatório nas abas dos usuários. É por isso que a propriedade silenciada faz a reprodução automática funcionar novamente.

54
Joe
  1. Abra chrome://flags/#autoplay-policy
  2. Configuração Nenhum gesto do usuário é necessário
  3. Reinicie o Chrome
28
Ming

A melhor solução que descobri é para silenciar o vídeo

HTML

<video loop muted autoplay id="videomain">
  <source src="videoname.mp4" type="video/mp4">
</video>
9
Moiz

Respondendo a pergunta em mãos ...
Não, não é o suficiente ter esses atributos. Para poder reproduzir automaticamente uma mídia com áudio, é necessário ter um gesto do usuário registrado em seu documento.

Mas essa limitação é muito fraca: se você recebeu esse gesto do usuário no documento pai e seu vídeo foi carregado de um iframe, você pode reproduzi-lo ...

Então tome por exemplo este violino , que é apenas

<video src="myvidwithsound.webm" autoplay=""></video>

No primeiro carregamento, e se você não clicar em qualquer lugar, ele não será executado, porque ainda não temos nenhum evento registrado.
Mas uma vez que você clica no botão "Run", então o documento pai (jsfiddle.net) recebeu um gesto do usuário, e agora o vídeo é reproduzido, mesmo que seja tecnicamente carregado em um diferente documento.

Mas o trecho a seguir, já que exige que você realmente clique no botão Run snippet code, será reproduzido automaticamente.

<video src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" autoplay=""></video>

Isso significa que seu anúncio provavelmente conseguiu ser reproduzido porque você fez um gesto do usuário para a página principal.


Agora, observe que o Safari e o Google Chrome para dispositivos móveis têm regras mais rígidas do que isso e exigirão que você acione ao menos uma vez o método play() programaticamente no elemento <video> ou <audio> a partir do próprio manipulador de eventos do usuário.

btn.onclick = e => {
  // mark our MediaElement as user-approved
  vid.play().then(()=>vid.pause());
  // now we can do whatever we want at any time with this MediaElement
  setTimeout(()=> vid.play(), 3000);
};
<button id="btn">play in 3s</button>
<video
  src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" id="vid"></video>

E se você não precisar do áudio, simplesmente não o conecte à sua mídia, um vídeo com apenas uma trilha de vídeo também poderá ser reproduzido automaticamente e reduzirá o uso da largura de banda do usuário.

7
Kaiido

Tente usar o mousemove event lisentner

var audio = document.createElement("AUDIO")
document.body.appendChild(audio);
audio.src = "./audio/rain.m4a"

document.body.addEventListener("mousemove", function () {
    audio.play()
})
3
時雨初

Para mim (em Angular projeto) este código ajudou:

Em HTML você deve adicionar autoplay muted

Em JS/TS

playVideo() {
    const media = this.videoplayer.nativeElement;
    media.muted = true; // without this line it's not working although I have "muted" in HTML
    media.play();
}
3
Eutrepe

ATUALIZAR

Se esta técnica não funcionar mais, existe outra opção. Você pode incluir um áudio curto e muito silencioso (-60db) e reproduzi-lo dentro do manipulador de cliques do botão oculto. Depois disso, todos os outros arquivos de áudio/vídeo poderão ser reproduzidos sem uma interação direta com o usuário. Você pode levar um áudio silencioso de http://adventure.land/sounds/loops/empty_loop_for_js_performance.wav e cortá-lo para meio segundo (ou menos).


Existe uma solução muito fácil - basta adicionar um BOTÃO à sua página, estilizá-lo para ser invisível e depois chamar o método button.click() antes da play()

Funciona como um charme no Chromium versão 70.0.3538.67 (compilação oficial) (64 bits)

var btn = document.getElementById('btn');
document.addEventListener(btn,myPlay,false);
btn.click();

function myPlay()
{
  document.getElementById('movie').play();
}
<video
    title="Advertisement" id="movie"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm"
    ></video>
    <button type="button" style="z-index:-1;opacity:0;position: absolute;left:-1000px;" id="btn"></button>

2
IVO GELOV

O Chrome precisa de uma interação do usuário para que o vídeo seja reproduzido automaticamente ou reproduzido via js (video.play ()). Mas a interação pode ser de qualquer tipo, em qualquer momento. Se você clicar aleatoriamente na página, o vídeo será reproduzido automaticamente. Resolvi então, adicionando um botão (apenas em navegadores chrome) que diz "habilitar reprodução automática de vídeo". O botão não faz nada, apenas clica nele, é a interação do usuário necessária para qualquer outro vídeo.

0
Alarik

Eu tive alguns problemas jogando no Android Phone. Após algumas tentativas, descobri que quando a Economia de dados está ativada, não há reprodução automática:

Não há autoplay se o modo Economia de dados estiver ativado. Se o modo Economia de dados estiver ativado, a reprodução automática será desativada nas configurações de mídia.

Fonte

0
Ido

Eu encontrei um erro semelhante ao tentar reproduzir um arquivo de áudio. No início, ele estava funcionando, então ele parou de funcionar quando comecei a usar o método markForCheck de ChangeDetector na mesma função para acionar uma nova renderização quando uma promessa é resolvida (tive um problema com a renderização de exibição).

Quando mudei o markForCheck para detectChanges ele começou a funcionar novamente. Eu realmente não posso explicar o que aconteceu, eu só pensei em soltar isso aqui, talvez ajudaria alguém.

0
King James Enejo