HTML onseeked Event Attribute

Description

The onseeked HTML event attribute specifies a JavaScript function to be executed when the user finishes moving or skipping to a new position in an audio or video element. This event is fired after the seeking attribute has been set to false.

The onseeked event can be used to perform a variety of tasks, such as:

Display a message to the user indicating that the seek operation is complete.
Update the progress bar of the audio or video element.
Start or resume playback of the audio or video element.
Load a new audio or video source at the specified position.

To use the onseeked event attribute, simply add it to the audio or video element that you want to monitor. The value of the attribute should be the name of the JavaScript function that you want to be executed when the event is fired.

For example, the following code shows how to use the onseeked event attribute to update the progress bar of a video element:

<video id="myVideo" onseeked="updateProgressBar()">
  <source src="video.mp4" type="video/mp4">
</video>

The updateProgressBar() function could be defined as follows:

function updateProgressBar() {
  // Get the current playback position of the video element.
  var currentTime = document.getElementById("myVideo").currentTime;

  // Calculate the percentage of the video that has been played.
  var progress = currentTime / document.getElementById("myVideo").duration * 100;

  // Update the progress bar.
  document.getElementById("myProgressBar").style.width = progress + "%";
}

When the user seeks to a new position in the video, the updateProgressBar() function will be executed to update the progress bar.

Syntax

<element onseeked="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 lever to a new audio position:</p>



<audio id="myAudio" controls onseeked="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 onseeked attribute for an AUDIO element.</p>



</body>

</html>