onprogress

The onprogress event in HTML takes place while resources are loading, providing updates on the progress of activities like downloading or uploading.

onprogress event

The onprogress event in HTML is triggered to show the progress of loading resources like <audio> or <video>. It enables developers to take actions or update the interface based on the current loading status.

Syntax

In HTML

index.html

<element onprogress ="myScript">

In JS

script.js

object.onprogress  = function(){myScript};

In JavaScript, the `addEventListener()` function is used.

script.js

object.addEventListener("progress ", myScript);

Example

::event-onprogress ::

index.html

<!DOCTYPE html> 
<html> 
<body> 
<h1>HTML DOM Events</h1>
<h2>The onprogress Event</h2>

<video controls onprogress="myFunction()">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>Video courtesy of <a href="https://institute.qarpeo.com" target="_blank">Tree</a>.</p>

<p id="demo"></p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Downloading video.";
}
</script>

</body> 
</html>

Values

<script>
- The name of the <script> to run when the event occurs.

Conclusion

The onprogress event in HTML provides updates on the loading status of resources like <audio> and <video>. It allows developers to track and display progress, enhancing user interaction. This event is useful for improving the experience in media-heavy applications.

onplaying

The onplaying event in HTML is triggered when media playback resumes after being paused, allowing developers to perform actions or updates in response.

onratechange

The onratechange event in HTML is triggered when the playback rate of an audio or video element is modified, enabling developers to react to changes in playback speed.