HTML onprogress Event Attribute

Description

The onprogress HTML event attribute specifies a JavaScript function to be executed when the browser is downloading an audio or video file. This event is triggered multiple times during the download process, and the function can be used to update the user on the progress of the download.

The onprogress event is supported by the <audio> and <video> elements. To use it, simply add the attribute to the element and specify the name of the JavaScript function to be executed. For example:

<video onprogress="myFunction()">
  <source src="video.mp4" type="video/mp4">
</video>

The myFunction() function will be executed multiple times during the download process, and it will be passed an Event object that contains information about the progress of the download, such as the number of bytes downloaded and the total number of bytes to be downloaded.

The onprogress event can be used to update the user on the progress of the download in a variety of ways. For example, you could use it to display a progress bar, or to update a message that tells the user how long the download is expected to take.

Here is an example of a JavaScript function that can be used to update a progress bar on the page:

function myFunction(event) {
  var progressbar = document.querySelector('#progressbar');
  progressbar.value = event.loaded / event.total * 100;
}

This function will be executed multiple times during the download process, and it will update the value property of the progressbar element to reflect the progress of the download.

The onprogress event can be a useful tool for keeping users informed of the progress of audio and video downloads. It is especially useful for large files, where the download process can take a long time.

Syntax

<element onprogress="script">

Values

scriptThe name of the script to use when the event has been triggered.

Example

HTML

<!DOCTYPE HTML>

<html>

<body>



<audio id="myAudio" controls onprogress="myFunction()">  

  <source src="audio.mp3" type="audio/mpeg">

  Your browser does not support the audio tag.

</audio>



<p>Play sound file.</p> 



<script>

function myFunction() {

    alert("EXAMPLE: Sound file started downloading.");

}

</script> 



<p>

This example shows how to use the onprogress attribute for an AUDIO element.</p>



</body>

</html>