0

tengo una web muy pero muy simple con algo de texto y un video de fondo, lo que estoy intentando y pese a que mire un monton de videos explicativos, no se como hacer un loading que contemple el video que se carga en el background... o sea yo no quiero ver nada de la pagina, solo el loading, hasta que el video este en condiciones de reproducirse...el video es una etiqueta y esta en local.. Uno de los videos que vi, https://www.youtube.com/watch?v=c75XWcrLoDU , esta piola pero es para cargar img...yo tengo un video de fondo y un audio.. agradezco cualquier ayuda que me puedan dar...saludos

2
  • Bueno, no podemos ayudarte si no compartes tu trabajo y lo que has intentado. Esto sería hacer la tarea por ti. Aún si hacemos la tarea por ti (lo cual no va con los reglamentos de este sitio), no sabemos exactamente lo que quieres, y como es la estructura de tu página. DISCULPA EL SARCASMO el 26 mar. 2022 a las 23:49
  • Bueno creo que lo dije en todo que escribí, lo que quiero agregar es un loading que contemple mi video de fondo, o sea el loading tiene que mostrar una barra de carga, un gif girando, lo que sea hasta que se empiece a reproducir el video, ahí por supuesto tiene que desaparecer el loading
    – Landom
    el 27 mar. 2022 a las 16:02

2 respuestas 2

0

Para controlar la carga completa de un vídeo o audio, se necesita de loadedmetadata.

Cuando se carga todos los datos del vídeo o audio, llama a la función de tu barra de carga.

Dentro de la función llama a tu barra de carga que: tiene que desaparecer. Ya sea estando con otro script o en CSS.

let video = document.getElementById("video");

video.addEventListener('loadedmetadata', function(e) {
 
)}
3
  • yo tengo este codigo: <!DOCTYPE html> <html> <body> <video id="myVideo" width="320" height="176"> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> <script> var vid = document.getElementById("myVideo"); vid.onloadedmetadata = function() { alert("Metadata for video loaded"); }; </script> </body> </html> como agrego un loding paara que al terminar de cargar el video, se vaya el loading y quede la web y el video de fondo?
    – Landom
    el 27 mar. 2022 a las 18:15
  • Acaso no copiaste el código del vídeo que indicaste? Teniendo ese CSS y con el código que te respondí ya estaría solucionado. el 27 mar. 2022 a las 18:31
  • El codigo del video ya lo tengo y funciona perfecto, pero no entiendo lo de pegar tu codigo, ni donde ni como llamo a la barra de carga... a tu codigo le faltan las etiquetas de <script> </script> ?
    – Landom
    el 29 mar. 2022 a las 0:50
0

Mira, con este código funciona, pero solo el video:

  <!DOCTYPE html> 
    <html> 
    <head>
   <link href="css/video-3.css" type="text/css" rel="stylesheet" />
   <script 
     src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
    </script>
   <script src="js/video-3.js"></script>
    </head>
    <body> 
    <video id="video-background" autoplay muted loop>
      <source src="video/video.webm" type="video/webm">
      Your browser does not support HTML5 video.
    </video>
    <audio id="audio-background" src="audio/music.webm" autoplay="true" 
     preload     
    type="audio/mpeg">
     Your browser does not support HTML5 audio.
    </audio>
    <script>
    var vid = document.getElementById("video-background");
    vid.onloadedmetadata = function() {
     alert("Metadata for video loaded");
    };
    </script> 
    </body> 
    </html>

como puedo hacer para que el script sea para el video y tambien para el audio? o sea este script:

<script>
var vid = document.getElementById("video-background");
 vid.onloadedmetadata = function() {
alert("Metadata for video loaded");
 };
</script> 

que sea para ambos, se puede hacer eso?

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.