HTML onwaiting Event Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

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

HTML

<!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>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML onwaiting event attribute. Hover over a browser icon to see the version that first introduced support for this HTML event attribute.