Cara eu consegui resolver aqui em partes. Não sei se existe alguma forma 100% segura de resolver isso, pois por questões de preferencia do usuário, UX e até segurança, em vídeos com Som o Autoplay não costuma funcionar.
O que eu fiz foi colocar autoplay
e muted
no vídeo, e depois em uma função setTimeout()
eu removo o atributo muted
, porem eventualmente vc pode ter esse erro
Veja mais: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Esse erro ocorre apenas no Chrome. No FireFox e no Edge o áudio aparece mesmo sem interação do usuário. (no Safari não sei dizer, nem em browsers mobile, nã tenho um ambiente de teste para isso)
Mas de qq forma aqui tem um exemplo que pode funcionar ai e vale a pena vc testar.
Atenção no Chrome:
Repare que ao clicar em executar abaixo, se vc NÃO fizer nenhuma interação na página, seja clicando em algum lugar, dando scroll ou qq outra coisa o vídeo vai dar o erro descrito acima e vai se pausar. Mas se houver qq interação na página o muted
vai ser removido e o vídeo começa a ter áudio depois de 2000ms. Então esse código só funciona se o user clicar em algo, arrastar algo, escrever algo o fizer scroll na página dentro desse intervalo de 2 segundo, ou então o vídeo vai se pausar.
OBS: Scroll com a mouse wheel
não vai ser uma interação "suficiente" para evitar o pousamento do vídeo, vc vai precisar scrollar com o scroll da janela clicando...
const vid = document.getElementById('vv');
setTimeout(
function () {
vid.muted = false;
}
, 2000);
<br>
<br><input type="text" name="" id="">
<br><input type="checkbox" name="" id="">
<br>
<video id="vv" muted width="320" height="240" autoplay>
<source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
</video>
<br>
<br>
<br>
<br>
<br>
<br>