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
HTML DOM Video seeking Property
The HTML DOM Video seeking property returns a boolean value indicating whether the user is currently seeking (moving the playback position) in the video. It returns true during the seeking process and false when not seeking.
Syntax
Following is the syntax for accessing the seeking property −
videoObject.seeking
Return Value
The seeking property returns a boolean value −
-
true− When the user is actively seeking (dragging the progress bar or using seek controls) -
false− When the video is playing normally or paused without seeking
How It Works
The seeking property is particularly useful when combined with the onseeking and onseeked events. The onseeking event fires when seeking starts, and onseeked fires when seeking ends. During the seeking process, the seeking property remains true.
Example
Following example demonstrates the HTML DOM Video seeking property with event handlers −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video seeking Property</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.video-container { text-align: center; margin: 20px auto; width: 70%; }
.status { margin-top: 15px; padding: 10px; background-color: #f8f9fa; border-radius: 5px; }
video { border: 2px solid #ddd; border-radius: 8px; }
</style>
</head>
<body>
<div class="video-container">
<h2>Video Seeking Property Demo</h2>
<video id="myVideo" width="400" controls onseeking="handleSeeking()" onseeked="handleSeeked()">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div id="statusDisplay" class="status">Video ready - seeking: false</div>
<button onclick="checkSeekingStatus()">Check Seeking Status</button>
</div>
<script>
var video = document.getElementById("myVideo");
var statusDisplay = document.getElementById("statusDisplay");
function handleSeeking() {
statusDisplay.innerHTML = "User is seeking... seeking: " + video.seeking;
statusDisplay.style.backgroundColor = "#fff3cd";
}
function handleSeeked() {
statusDisplay.innerHTML = "Seeking completed - seeking: " + video.seeking;
statusDisplay.style.backgroundColor = "#d4edda";
}
function checkSeekingStatus() {
statusDisplay.innerHTML = "Current seeking status: " + video.seeking;
statusDisplay.style.backgroundColor = "#d1ecf1";
}
</script>
</body>
</html>
In this example, the seeking property is checked during the onseeking and onseeked events. The status display shows real-time seeking information −
Video ready - seeking: false (When seeking starts: User is seeking... seeking: true) (When seeking ends: Seeking completed - seeking: false)
Common Use Cases
The seeking property is commonly used for −
- Loading indicators − Show a spinner or loading message while the user seeks to a new position
- Analytics − Track user interaction patterns with video content
- UI feedback − Provide visual feedback during the seeking process
- Performance optimization − Pause other operations while seeking is in progress
Browser Compatibility
The seeking property is supported in all modern browsers that support HTML5 video, including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+.
Conclusion
The HTML DOM Video seeking property provides a simple boolean check to determine if a video is currently being sought. It works seamlessly with the onseeking and onseeked events to provide complete control over the seeking process and enable responsive user interfaces.
178 Views
