HTML onprogress Event Attribute - HTML Media Events Attribute

The HTML onprogress Attribute is a event attribute which occurs when the browser is downloading the specified audio or video. Attribute Value: This attribute contains single value script which works when onprogress event attribute call. This attribute is supported by <audio> and <video> tags.

Example of HTML onprogress Event Attribute

It will execute a JavaScript when the video is downloading.

index.html

Example: HTML

 <script>
function myFunction() {
  alert('Downloading video');
}
</script>

<video onprogress="myFunction()">

Output should be:

Definition and Usage of HTML onprogress Event Attribute

The onprogress attribute fires when the browser is in the process of getting the media data (downloading the media).

During the loading process of an audio/video, the following event attributes occur, in this order:

loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythrough

Browser Support of HTML onprogress Event Attribute

The numbers in the table specify the first browser version that fully supports the event attribute.

Output should be:

Syntax of HTML onprogress Event Attribute

<element onprogress="script">

Attribute Values of HTML onprogress Event Attribute

Value	Description
script	The script to be run on onprogress

Technical Details of HTML onprogress Event Attribute

Supported HTML tags:	<audio> and <video>

Execute a JavaScript when the video is downloading

It will Ppress play on the video.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>
<script>
function myFunction() { alert('Downloading video');
}
</script>
<p>Press play on the video:</p>
<video controls onprogress="myFunction()"> <source src="https://download.samplelib.com/mp4/sample-5s.mp4" type="video/mp4"> <source src="https://download.samplelib.com/mp4/sample-5s.mp4" type="video/ogg"> Your browser does not support HTML5 video.
</video>
<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>
</body>
</html>

Output should be:

Execute a JavaScript when the audio is downloading

It will press play on the audio.

index.html

Example: HTML

<!DOCTYPE html> 
<html> 
<body> 

<script>
function myFunction() {
  alert('Downloading audio');
}
</script>

<p>Press play on the audio:</p>

<audio controls onprogress="myFunction()">
  <source src="https://file-examples.com/index.php/sample-audio-files/sample-mp3-download/" type="audio/ogg">
  <source src="https://file-examples.com/index.php/sample-audio-files/sample-mp3-download/" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

</body> 
</html>

Output should be:

html event attributes

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Media Events Attribute
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference