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 true indicating that seeking is active in HTML?
The onseeking event attribute in HTML is triggered when the user starts seeking (moving to a different position) in an audio or video element. This event fires when the seeking process begins, before the media actually jumps to the new position.
Syntax
Following is the syntax for the onseeking event attribute −
<video onseeking="functionName()"></video> <audio onseeking="functionName()"></audio>
The onseeking attribute accepts a JavaScript function that executes when the seeking operation starts. This is commonly used to provide user feedback or track user interactions with media content.
How It Works
When a user drags the progress bar or clicks on a different position in a video or audio player, the following sequence occurs −
onseeking fires when the user starts moving to a new position
The media element begins the seeking process
onseeked fires when the seeking operation completes and playback can resume
Basic Video Example
Following example demonstrates the onseeking event with a video element −
<!DOCTYPE html>
<html>
<head>
<title>Video Seeking Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video Seeking Example</h2>
<video controls width="400" onseeking="displaySeekingMessage()">
<source src="/html5/sample-video.mp4" type="video/mp4">
<source src="/html5/sample-video.webm" type="video/webm">
Your browser does not support the video element.
</video>
<p id="message">Click and drag on the video progress bar to trigger seeking.</p>
<script>
function displaySeekingMessage() {
document.getElementById("message").innerHTML = "Seeking in progress...";
setTimeout(function() {
document.getElementById("message").innerHTML = "Ready to seek again.";
}, 2000);
}
</script>
</body>
</html>
When the user drags the progress bar, the message changes to indicate that seeking is active. After 2 seconds, it resets to the original message.
Audio Example with Multiple Events
Following example shows both onseeking and onseeked events with an audio element −
<!DOCTYPE html>
<html>
<head>
<title>Audio Seeking Events</title>
<style>
.event-log {
background-color: #f5f5f5;
padding: 10px;
border-radius: 5px;
margin-top: 10px;
height: 100px;
overflow-y: auto;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Audio Seeking Events</h2>
<audio controls
onseeking="logEvent('Seeking started')"
onseeked="logEvent('Seeking completed')">
<source src="/html5/sample-audio.mp3" type="audio/mpeg">
<source src="/html5/sample-audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<div class="event-log" id="eventLog">
<strong>Event Log:</strong><br>
Move the audio progress bar to see events...
</div>
<script>
function logEvent(message) {
var log = document.getElementById("eventLog");
var timestamp = new Date().toLocaleTimeString();
log.innerHTML += "<br>" + timestamp + " - " + message;
log.scrollTop = log.scrollHeight;
}
</script>
</body>
</html>
This example logs both the start and completion of seeking operations with timestamps in a scrollable event log.
Practical Use Case Example
Following example shows a practical implementation that tracks user seeking behavior for analytics −
<!DOCTYPE html>
<html>
<head>
<title>Seeking Analytics</title>
<style>
.stats {
background-color: #e8f4fd;
padding: 15px;
border-radius: 5px;
margin-top: 15px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video Analytics Example</h2>
<video controls width="400"
onseeking="trackSeeking()"
ontimeupdate="updateCurrentTime(this)">
<source src="/html5/demo-video.mp4" type="video/mp4">
<source src="/html5/demo-video.webm" type="video/webm">
Your browser does not support the video element.
</video>
<div class="stats">
<h3>Viewing Statistics</h3>
<p>Current Time: <span id="currentTime">0</span> seconds</p>
<p>Total Seeks: <span id="seekCount">0</span></p>
<p>Last Seek At: <span id="lastSeek">Never</span></p>
</div>
<script>
var seekCounter = 0;
function trackSeeking() {
seekCounter++;
document.getElementById("seekCount").textContent = seekCounter;
document.getElementById("lastSeek").textContent = new Date().toLocaleTimeString();
}
function updateCurrentTime(video) {
document.getElementById("currentTime").textContent = Math.floor(video.currentTime);
}
</script>
</body>
</html>
This example tracks how many times a user seeks through the video and displays real-time statistics including current playback position and seeking frequency.
Browser Compatibility
The onseeking event is supported in all modern browsers that support HTML5 video and audio elements. This includes Chrome, Firefox, Safari, Edge, and Opera. The event works consistently across desktop and mobile platforms.
| Browser | Support |
|---|---|
| Chrome | Yes (all versions) |
| Firefox | Yes (all versions) |
| Safari | Yes (all versions) |
| Edge | Yes (all versions) |
| Opera | Yes (all versions) |
Conclusion
The onseeking event attribute provides a powerful way to respond when users navigate through audio or video content. It is commonly used for analytics tracking, providing user feedback, or implementing custom media controls. The event fires immediately when seeking begins, allowing for real-time interaction with media playback.
174 Views
