Loading para vifeo/audio

landom · #1 (**permalink**) 28/03/2022, 06:07

Hola, tengo este codigo que quiero implementar, en donde se carga un video y un audio, pero me faltaria un laoding, que me indique como va la carga del video y del audio, este es el codigo:

Código HTML:

!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="true" preload 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>

por otro lado, onloadedmetadata solo lo es para el video, como puedo hacer que sea tambien para el audio en el script?

teslas · #2 (**permalink**) 18/04/2022, 08:26

Tendría que ser algo así, y podrías cargar tu gif de carga.

Código HTML:

<span id="loader" style="display:none;"> 
          <img src="ruta/loadingimage.gif" alt="cargando"/> 
 </span>