The HTML onwaiting attribute is an event handler used to specify a script that will run if the media pauses but is likely to resume (for example, when the media needs to buffer more data).
Definition and Usage
➔ The onwaiting attribute event triggers when the media has the potential to resume even if paused.
➔ The onwaiting event attribute is used with audio and video elements.
Syntax
//In HTML
<audio onwaiting="myFunction()"></audio>
<video onwaiting="myFunction()"></video>
//OR
<video controls onwaiting="myFunction()" id="sample">
<source src="video-source.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
//In javascript
document.getElementById("sample").onwaiting=function() {myFunction();};
//OR
document.getElementById("sample").addEventListener("waiting", myFunction);
//OR
document.getElementById("sample").addEventListener("waiting", (event) => {
myFunction();
});
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML onwaiting attribute example</title>
</head>
<body>
<h3>HTML onwaiting attribute example</h3>
<p>onwaiting event trigger when the media has paused but is expected to resume.</p>
<p id="output">Playing position:</p>
<!-- "https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4" -->
<video controls onwaiting="buffering(event)" ontimeupdate="myFunction(event)" id="sample">
<source src="video-source-path.mp4" type="video/mp4">
This browser does not support the video tag.
</video>
<script>
//In javascript
//document.getElementById("sample").onwaiting=function() {myFunction();};
//OR
//document.getElementById("sample").addEventListener("waiting", myFunction);
function myFunction() {
var video = document.getElementById("sample");
var time = video.currentTime;
var soundStatus = "";
if (video.muted) {
soundStatus = "Muted"
} else (
soundStatus = "Unmuted"
)
document.getElementById("output").innerHTML = "Playing position: " + time.toFixed(2) + " and Volume: " + video.volume * 100 + "% " + " Sound Status: " + soundStatus;
}
function buffering() {
alert("The media is buffering.");
}
</script>
</body>
</html>