Como lidar com “Não capturada (prometida) DOMException: play () falhou porque o usuário não interagiu com o documento primeiro.” no Desktop com Chrome 66?

Estou recebendo a mensagem de erro ..

Não capturado (em promessa) DOMException: play () falhou porque o usuário não interagiu com o documento primeiro.

.. ao tentar reproduzir um vídeo no desktop usando o Chrome versão 66.

Encontrei um anúncio que começou a ser reproduzido automaticamente em um site, mas 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, é por-passando bloqueador autoplay do v66 Chrome realmente tão fácil como apenas adicionando os webkit-playsinline="true", playsinline="true"e autoplay=""atributos para o <video>elemento? Existem consequências negativas para isso?

Para fazer a reprodução automática em elementos html 5 funcionar após a atualização do Chrome 66, você só precisa adicionar a mutedpropriedade ao elemento 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://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    autoplay=""></video>

Só precisa muted="muted"

<video
    title="Advertisement"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    autoplay="true"
    muted="muted"></video>

Acredito que a atualização do Chrome 66 está tentando parar as guias de criar ruído aleatório nas guias do usuário. É por isso que a propriedade muted faz com que a reprodução automática funcione novamente.

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

HTML

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

1. Abrir chrome://settings/content/sound
2. Configuração Nenhum gesto do usuário é necessário
3. Reiniciar o Chrome

Respondendo à pergunta em questão ...
Não, não basta ter esses atributos, para poder reproduzir automaticamente uma mídia com áudio você precisa ter um gesto do usuário registrado no seu documento.

Mas, essa limitação é muito fraca: se você recebeu este 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 nenhum lugar, ele não funcionará, pois ainda não temos nenhum evento cadastrado.
Mas assim que você clica no botão "Executar" , o documento pai (jsfiddle.net) recebeu um gesto do usuário e agora o vídeo é reproduzido, embora seja tecnicamente carregado em um documento diferente.

Mas o trecho a seguir, uma vez que requer que você realmente clique no botão Executar trecho de código , 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 foi reproduzido porque você fez um gesto do usuário para a página principal.

Agora, observe que o Safari e o Mobile Chrome têm regras mais rígidas do que isso e exigirão que você realmente acione pelo menos uma vez o play()método programaticamente no elemento <video>ou <audio>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 precisa do áudio, simplesmente não o anexe à sua mídia, um vídeo com apenas uma trilha de vídeo também pode ser reproduzido automaticamente e reduzirá o uso de largura de banda do usuário.

Para mim (no projeto Angular), 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();
}

Tente usar o ouvinte de evento mousemove

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

document.body.addEventListener("mousemove", function () {
    audio.play()
})

Estenda o elemento DOM, lide com o erro e degradar-se perfeitamente

Abaixo, uso a função de protótipo para encapsular a função de reprodução DOM nativa, agarrar sua promessa e, em seguida, degradar para um botão de reprodução se o navegador lançar uma exceção. Esta extensão aborda a deficiência do navegador e é plug-and-play em qualquer página com conhecimento do (s) elemento (s) de destino.

// JavaScript
// Wrap the native DOM audio element play function and handle any autoplay errors
Audio.prototype.play = (function(play) {
return function () {
  var audio = this,
      args = arguments,
      promise = play.apply(audio, args);
  if (promise !== undefined) {
    promise.catch(_ => {
      // Autoplay was prevented. This is optional, but add a button to start playing.
      var el = document.createElement("button");
      el.innerHTML = "Play";
      el.addEventListener("click", function(){play.apply(audio, args);});
      this.parentNode.insertBefore(el, this.nextSibling)
    });
  }
};
})(Audio.prototype.play);

// Try automatically playing our audio via script. This would normally trigger and error.
document.getElementById('MyAudioElement').play()

<!-- HTML -->
<audio id="MyAudioElement" autoplay>
  <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

No meu caso, eu tive que fazer isso

 // Initialization in the dom
 // Consider the muted attribute
 <audio id="notification" src="path/to/sound.mp3" muted></audio>


 // in the js code unmute the audio once the event happened
 document.getElementById('notification').muted = false;
 document.getElementById('notification').play();

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, a qualquer momento. Se você clicar aleatoriamente na página, o vídeo será reproduzido automaticamente. Resolvi então, adicionando um botão (somente em navegadores Chrome) que diz "habilitar reprodução automática de vídeo". O botão não faz nada, mas apenas clicar nele é a interação do usuário necessária para qualquer outro vídeo.

Encontrei um erro semelhante com ao tentar reproduzir um arquivo de áudio. No início, estava funcionando, depois parou de funcionar quando comecei a usar o ChangeDetector'smarkForCheck método na mesma função para acionar uma re-renderização quando uma promessa é resolvida (tive um problema com a renderização de visualização).

Quando mudei o markForCheckpara, detectChangesele começou a funcionar novamente. Realmente não sei explicar o que aconteceu, só pensei em largar isso aqui, talvez ajude alguém.

Você deve ter adicionado um mutedatributo dentro de seu videoElementpara que seu código funcione conforme o esperado. Olha abaixo ..

<video id="IPcamerastream" muted="muted" autoplay src="videoplayback%20(1).mp4" width="960" height="540"></video>

Não se esqueça de adicionar um link de vídeo válido como fonte

Tive alguns problemas para jogar no telefone Android. Depois de algumas tentativas, descobri que, quando a Economia de dados está ativada, não há reprodução automática:

Não haverá reprodução automática 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

Digite Chrome: // flags na barra de endereço

Pesquisa: reprodução automática

Política de reprodução automática

Política usada ao decidir se o áudio ou o vídeo podem ser reproduzidos automaticamente.

- Mac, Windows, Linux, Chrome OS, Android

Defina como " Nenhum gesto do usuário é necessário "

Reinicie o Chrome e você não precisará alterar nenhum código