seeking
16 March, 2023
0
0
0
Contributors
About
The seeking event is fired when the user begins seeking (i.e., attempting to jump to a new position) in a media file that is currently playing. This event is typically fired when the user clicks or drags the seek bar or uses keyboard controls to seek to a new position in the media file. The seeking event is part of the HTMLMediaElement interface, which is implemented by all media elements in HTML, including audio and video elements.
When the seeking event is fired, any event listeners registered for that event are called, and the event object is passed to the listener function as an argument. The event object contains information about the seeking operation, such as the new seek position, the time when the event was fired, and the target element that fired the event.
Developers can use the seeking event to perform various tasks, such as updating the UI to reflect the new seek position, saving the seek position in local storage, or pausing or stopping the media playback while the seek operation is in progress. By listening for the seeking event, developers can add custom functionality to their media player applications and provide a better user experience for their users.
Event listener
HTML
<video src="my-video.mp4" id="myVideoPlayer"></video>JavaScript
const videoPlayer = document.getElementById("myVideoPlayer");
videoPlayer.addEventListener("seeking", function(event) {
console.log("User is seeking to a new position:", event.target.currentTime);
});Here, we retrieve the videoPlayer element using the getElementById method, then add an event listener for the seeking event using the addEventListener method. The event listener function takes an event parameter, which is automatically passed by the browser when the event is fired. Inside the event listener function, we log a message to the console indicating that the user is seeking to a new position, along with the current time of the media element.
Property
Here's an example of using the onseeking property to register a function to handle the seeking event:
const videoPlayer = document.getElementById("myVideoPlayer");
videoPlayer.onseeking = function(event) {
console.log("User is seeking to a new position:", event.target.currentTime);
};Here, we retrieve the videoPlayer element using the getElementById method, then set its onseeking property to a function that will be called whenever the seeking event is fired. Inside the function, we log a message to the console indicating that the user is seeking to a new position, along with the current time of the media element.
We can also access the seeking property of a media element, like so:
const videoPlayer = document.getElementById("myVideoPlayer");
if (videoPlayer.seeking) {
console.log("The user is currently seeking to a new position");
} else {
console.log("The user is not currently seeking");
}Here, we retrieve the videoPlayer element using the getElementById method, then check the value of its seeking property. If the value is true, we log a message to the console indicating that the user is currently seeking to a new position. If the value is false, we log a message indicating that the user is not currently seeking.
Note that the seeking property is a read-only property, so you cannot set its value directly. Instead, it reflects the current state of the media element and is updated automatically by the browser when the user begins or ends a seek operation.
Inline
You can use the onseeking attribute inline to register a function to handle the seeking event:
HTML
<video onseeking="handleSeeking(event)">
<source src="video.mp4">
</video>JavaScript
function handleSeeking(event) {
console.log("User is seeking to a new position:", event.target.currentTime);
}Here, we have an HTML5 video element with an onseeking attribute that specifies a function to handle the seeking event. The function is defined in a separate script block and takes an event parameter, which is automatically passed by the browser when the event is fired. Inside the function, we log a message to the console indicating that the user is seeking to a new position, along with the current time of the media element.
Note that using the onseeking attribute inline to register an event listener is not considered best practice, as it can make your code harder to read and maintain. Instead, you should use the addEventListener method to register event listeners in JavaScript code.
Programmatic trigger
There is no built-in seeking() method for seeking to a particular position within a file or stream.
You can, however, use the dispatchEvent() method to programmatically trigger the seeking event on a media element:
HTML
<video id="myVideo" src="myVideo.mp4"></video>
<button onclick="seek(10)">Seek to 10 seconds</button>JavaScript
const video = document.getElementById("myVideo");
function seek(time) {
video.currentTime = time;
video.dispatchEvent(new Event('seeking'));
}
video.addEventListener('seeking', () => {
console.log('Video is seeking');
});Here, we have a video element with an id of myVideo and a src of myVideo.mp4. We also have a button with an onclick attribute that calls a seek() function when clicked.
Inside the seek() function, we set the currentTime property of the video element to the specified time (in this case, 10 seconds), and then dispatch a seeking event using the dispatchEvent() method.
We also add an event listener to the video element to listen for the seeking event and log a message to the console when it occurs.
When we click the button, the seek() function is called, which causes the video to seek to 10 seconds and dispatch a seeking event. The event listener we added then logs a message to the console, confirming that the event was triggered.
Note that if you want to trigger the seeked event instead of seeking, you can simply change the event name passed to new Event() to 'seeked'.
javascript