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
-
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– Narciso Aifuzel 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– Landomel 27 mar. 2022 a las 16:02
2 respuestas
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) {
)}
-
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?– Landomel 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> ?– Landomel 29 mar. 2022 a las 0:50
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?