Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Execute a script when the seeking attribute is set to false indicating that seeking has ended in HTML?
The onseeked attribute in HTML executes a script when the user finishes seeking (jumping to a new position) in an audio or video element. This event fires when the seeking attribute changes from true to false, indicating that the seek operation has completed and the media is ready to play from the new position.
Syntax
Following is the syntax for the onseeked attribute −
<video onseeked="script"></video> <audio onseeked="script"></audio>
Where script is the JavaScript code to execute when seeking ends.
How It Works
When a user interacts with the video or audio controls to jump to a different time position, the media element goes through two phases −
-
Seeking phase − The
seekingattribute istrueand theonseekingevent fires -
Seeked phase − The
seekingattribute becomesfalseand theonseekedevent fires
The onseeked event indicates that the media player has successfully moved to the new position and is ready to continue playback.
Example − Video Element with onseeked
Following example demonstrates the onseeked attribute with a video element −
<!DOCTYPE html>
<html>
<head>
<title>onseeked Attribute Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2 id="status">Seek to a new position in the video</h2>
<video id="myVideo" width="400" height="240" controls onseeked="showPosition()">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support the video element.
</video>
<p id="info">Use the video controls to seek to different positions.</p>
<script>
function showPosition() {
var video = document.getElementById("myVideo");
var currentPos = Math.floor(video.currentTime);
document.getElementById("status").innerHTML = "Seeking completed! Current position: " + currentPos + " seconds";
document.getElementById("info").innerHTML = "Video duration: " + Math.floor(video.duration) + " seconds";
}
</script>
</body>
</html>
When you drag the progress bar or click on different positions, the onseeked event fires and displays the new current time position.
Example − Audio Element with onseeked
Following example shows the onseeked attribute with an audio element −
<!DOCTYPE html>
<html>
<head>
<title>Audio onseeked Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Audio Player with Seek Detection</h2>
<audio id="myAudio" controls onseeked="updateSeekInfo()">
<source src="https://www.soundjay.com/misc/sounds/bell-ringing-05.wav" type="audio/wav">
<source src="https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div id="seekInfo" style="margin-top: 15px; padding: 10px; background-color: #f0f0f0; border-radius: 5px;">
Seek to a position in the audio track to see the current time.
</div>
<script>
function updateSeekInfo() {
var audio = document.getElementById("myAudio");
var minutes = Math.floor(audio.currentTime / 60);
var seconds = Math.floor(audio.currentTime % 60);
var timeFormat = minutes + ":" + (seconds < 10 ? "0" + seconds : seconds);
document.getElementById("seekInfo").innerHTML =
"<strong>Seek completed!</strong><br>" +
"Current position: " + timeFormat + "<br>" +
"Seeking status: " + (audio.seeking ? "Active" : "Completed");
}
</script>
</body>
</html>
This example formats the time display and shows both the current position and seeking status when the seek operation completes.
Comparison with Related Events
The onseeked attribute works alongside other media events −
| Event | When It Fires | seeking Property |
|---|---|---|
| onseeking | When the user starts seeking | true |
| onseeked | When seeking operation completes | false |
| ontimeupdate | Continuously during playback | false (during normal playback) |
Browser Compatibility
The onseeked attribute is supported in all modern browsers that support HTML5 video and audio elements, including Chrome, Firefox, Safari, Edge, and Opera. It is part of the HTML5 specification and works consistently across platforms.
Common Use Cases
- Progress tracking − Update UI elements when users jump to specific positions
- Analytics − Track user seeking behavior for media analytics
- Synchronized content − Update captions, chapters, or related content based on new position
- Custom controls − Build custom media players that respond to seek operations
Conclusion
The onseeked attribute provides a way to execute JavaScript when a user finishes seeking to a new position in audio or video elements. It fires when the seeking attribute changes from true to false, making it ideal for updating displays, tracking user interactions, or synchronizing related content with the new media position.
218 Views
