0

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

github

4
  • 1
    Desde 2018 se necesita la intervención del usuario, sí o sí, debido a que las políticas del autoplay cambiaron, mira si esta respuesta te puede ayudar a comprender lo que ha ocurrido.
    – A. Cedano
    Commented el 22 nov. 2019 a las 10:09
  • Lo he visto, el problema que tengo realmente es el audio, si lograra un evento imposible de evitar al inicio de la pagina, como mover el raton, junto con el video, seria casi perfecto, pero no logro que ese evento funcione, con el click si, luego lo desactivo y arreglao, pero es eso, una puñeteria Commented el 22 nov. 2019 a las 12:57
  • 1
    Bueno, podrías pensar en una solución fuera de la programación. Hay que evaluar que tan necesario es que sea automático? Una invitación al usuario a reproducir el video podría ser una solución viable?
    – Legna
    Commented el 22 nov. 2019 a las 23:25
  • Puede ser, crearía un botón animado entonces en el centro que pusiera, VER INTRO, con efectos, lo pulsas, desaparece y sale todo como está, pero no se...la verdad es que eso arregla el problema por la interacción, pero no se, ver una intro con un click... Commented el 23 nov. 2019 a las 12:10

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.