Descripción
El evento onprogress de HTML es un evento que se dispara cuando un recurso que está siendo descargado del servidor se encuentra en proceso. Este evento se utiliza a menudo para mostrar el progreso de una descarga en la interfaz de usuario.
Sintaxis
El evento onprogress se implementa en HTML de la siguiente manera:
<elemento onprogress="script">
Ejemplo
<video src="video.mp4" onprogress="updateProgress(event)">
<progress value="0" max="100"></progress>
<script>
function updateProgress(event) {
var percent = (event.loaded / event.total) * 100;
document.getElementById('progress').style.width = percent + '%';
}
</script>
Este fragmento de código JavaScript define la función updateProgress que se llama cada vez que se dispara el evento onprogress. Actualiza el ancho de un elemento con el id ‘progress’ para reflejar el porcentaje de la descarga que se ha completado.
Este ejemplo muestra cómo utilizar el evento onprogress en un elemento de video para actualizar una barra de progreso durante la descarga del video.
Artículos
Vídeos HTML
Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.