The onprogress attribute defines a script that will be run when the browser is downloading a specific audio/video.
Definition and Usage
➔ When the browser loads a resource, the progress event is fired periodically.
➔ This event is not cancelable and does not bubble, meaning it is not propagated to any parent element.
Syntax
//In HTML
<audio|video onprogress="myScript">
//In JavaScript
audio|video_object.onprogress=function(){myScript};
//In JavaScript, using EventListener
audio|video_object.addEventListener("progress", myScript);
➔ Access childNode and Attributes.
Example
//alert(video.children.length)
//alert(video.children[0].tagName)
//alert(video.children[0].nodeName)
//alert(video.children[0].getAttribute('src'))
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| onprogress | <audio>, <video> |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML onprogress attribute example</title>
<meta charset="utf-8" />
</head>
<body>
<h3>HTML onprogress attribute example</h3>
<div class="example">
<video controls id="myvideoid" width="250">
<!-- "https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4" -->
<source src="source-video-path.mp4"
type="video/mp4">
</video>
</div>
<div>
<button type="button" class="loadButton">Load video</button>
</div>
<div class="event-log">
Event log:<p readonly id="eventLog"></p>
</div>
<script>
let source="";
const video = document.querySelector("video");
const loadButton = document.querySelector(".loadButton");
const eventLog = document.querySelector("#eventLog");
function handleEvent(event) {
eventLog.innerHTML += event.type + "<br>";
}
video.addEventListener("loadeddata", handleEvent);
video.addEventListener("loadedmetadata", handleEvent);
video.addEventListener("durationchange", handleEvent);
video.addEventListener("progress", handleEvent);
video.addEventListener("loadstart", handleEvent);
video.addEventListener("canplay", handleEvent);
video.addEventListener("canplaythrough", handleEvent);
if(video.children[0]==null || video.children[0].getAttribute('src')==null ){
loadButton.addEventListener("click",()=>{
source = document.createElement("source");
//"https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4"
source.setAttribute("src", "video-source.mp4",);
source.setAttribute("type", "video/mp4");
video.appendChild(source);
});
}
</script>
<p>Note: If you set src correctly, the handler will generate a response.</p>
</body>
</html>
Click on the "Try it Now" button to see how it works.