he estado intentando reproducir una intro para un juego en JS reproduciendo el audio y el video, y añadiendo un botón para saltar la intro, he visto que en chrome no puede hacerse autoplay porque el usuario tiene que interactuar antes de alguna forma, y el vídeo puede reproducirse pero no con audio en le video.
Os paso lo que he logrado, un evento de click con el ratón, no se si teneis algo mejor, pero bueno, menos es nada. Si alguno supiera como puedo lograr reproducir el audio y el video sin tener que interactuar sería perfecto.
Por cierto, el audio y el vídeo los tengo cargados de carpetas, no los tengo de youtube ni de ningún otro sitio.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>INTRO</title>
<style>
#backgroundvid {
position: fixed;
height: 100%;
width: 100%;
right: 0; bottom: 0;
background-color: black;
}
#boton{
position: fixed;
bottom:5%;
right:48%;
background-color: red;
border-style: inset;
border-radius: 20%;
font-weight: 10px;
}
</style>
</head>
<body id="cuerpo">
<video muted autoplay loop id="backgroundvid">
<source src="VIDEO/intro_VP8.webm" type="video/webm"/>
</video>
<button id="boton">
SKIP
</button>
<script>
var ok=true;
document.getElementById("cuerpo").addEventListener("click", reproducir);
document.getElementById("boton").addEventListener("click", enlace);
function reproducir(){
document.removeEventListener('click',reproducir);
var sonido=new Audio("AUDIO/intro.mp3");
if(ok){
sonido.play();
}
ok=false;
}
function enlace(){
window.location.href="interfaz1.html";
}
</script>
<script>
window.onerror=new Function("return true");
function fullscr(){
if(document.documentElement.requestFullscreen){document.documentElement.requestFullscreen()}
if(document.documentElement.msRequestFullscreen){document.documentElement.msRequestFullscreen()}
if(document.documentElement.mozRequestFullScreen){document.documentElement.mozRequestFullScreen()}
if(document.documentElement.webkitRequestFullScreen){document.documentElement.webkitRequestFullScreen()}
if(typeof window.ActiveXObject !== "undefined"){
var wscript = new ActiveXObject("WScript.Shell");
if(wscript !== null){wscript.SendKeys("{F11}")}
}
}
function fullcls(){
if(document.exitFullscreen){document.exitFullscreen()}
if(document.msExitFullscreen){document.msExitFullscreen()}
if(document.mozCancelFullScreen){document.mozCancelFullScreen()}
if(document.webkitCancelFullScreen){document.webkitCancelFullScreen()}
if(typeof window.ActiveXObject !== "undefined"){
var wscript = new ActiveXObject("WScript.Shell");
if(wscript !== null) {wscript.SendKeys("{F11}")}
}
}
document.onkeydown=function(e){
e = e ? e : window.event;
if(e.keyCode==13){fullscr();return false;}
if(e.keyCode==27){fullcls();return false;}
}
</script>
</body>
</html>
os adjunto enlace para que se vea lo que resulta Intro
y aquí os paso el github