HTML onseeking Event Attribute

Description

The onseeking HTML event attribute specifies a script to run when the user starts seeking a new position in an <audio> or <video> element. This event is fired when the user starts to drag the seek bar, or when they use the keyboard shortcuts to skip to a new position in the media.

The onseeking event is not cancelable and does not bubble. This means that you cannot prevent the event from happening, and it will not be propagated up the DOM tree to parent elements.

To use the onseeking event attribute, simply add it to the <audio> or <video> element that you want to listen for the event on. The value of the attribute should be the name of the JavaScript function that you want to run when the event is fired.

For example, the following code will show an alert box when the user starts seeking a new position in the video:

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

The following JavaScript function will be called when the user starts seeking a new position in the video:

function myFunction() {
  alert("Seeking started!");
}

You can use the onseeking event attribute to perform a variety of tasks, such as:

Showing a loading indicator while the media is seeking to a new position.
Updating the playback progress bar to show the new position.
Disabling certain controls until the media has finished seeking.
Playing a sound effect when the user starts seeking.

The onseeking event attribute is a useful way to detect and respond to user interaction with audio and video elements.

Syntax

<element onseeking="script">

Values

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

Example

HTML

<!DOCTYPE HTML>

<html>

<body>



<p id="demo">Move the audio slider to a new position:</p>



<audio id="myAudio" controls onseeking="myFunction()">  

  <source src="audio.mp3" type="audio/mpeg">

  Your browser does not support the audio tag.

</audio>



<script>

function myFunction() {

    document.getElementById("demo").innerHTML = "You have moved to position " + document.getElementById("myAudio").currentTime;

}

</script> 



<p>This example shows how to use the onseeking attribute for an AUDIO element.</p>



</body>

</html>