HTML onwaiting Event Attribute

Description

The onwaiting HTML event attribute is used to specify a JavaScript function to be executed when a media element is waiting for the next frame. This can happen for a variety of reasons, such as when the video is buffering or when the audio is loading.

The onwaiting attribute can be used on both <audio> and <video> elements. It is most commonly used on <video> elements, as videos are more likely to buffer than audio.

Here is an example of how to use the onwaiting attribute:

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

The myFunction() function will be executed whenever the video stops because it needs to buffer the next frame.

The onwaiting event can be used to improve the user experience of media applications. For example, you could use it to display a loading spinner or to pause the video until buffering is complete.

Here are some examples of how the onwaiting event can be used:

  • Display a loading spinner when the video is buffering.
  • Pause the video until buffering is complete.
  • Display a message to the user informing them that the video is buffering.
  • Reduce the video quality to reduce buffering.
  • Load the next video in a playlist while the current video is buffering.

Syntax

<element onwaiting="script">

Values

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

Example

<!DOCTYPE html> 
<html>
<head>
<title>onwaiting Event attribute</title>
</head>

<body>
<center>
<h2>onwaiting Event Attribute</h2>
<video controls id="videoID">
<source src="sample.mp4" type="video/mp4">
</video>
</center>
<script>
document.getElementById("videoID").addEventListener("waiting", testFunction);

function testFunction() {
alert("Buffering");
}
</script>

</body>
</html>

Browser Support

The following table will show you the current browser support for the HTML onwaiting Event Attribute.

Desktop
Edge Chrome Firefox Opera Safari
YesYesYesYesYes
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
YesYesYesYesYesYes

Last updated by CSSPortal on: 14th October 2023