seeked

16 March, 2023

Contributors

Milsaware

@milsaware

About

The seeked event is triggered when the user seeks to a new position in an audio or video file. This event is useful for developers who want to create a more immersive and interactive multimedia experience for their users. By utilising the seeked event, developers can create custom behaviours and effects based on user actions within the multimedia player.

The seeked event is part of a larger group of media events in JavaScript that includes other events like play, pause, ended, and timeupdate. These events allow developers to control the playback of multimedia files and respond to user actions in real-time. The seeked event, in particular, is fired when the user finishes seeking (fast forwarding or rewinding) and the playback resumes from the new position. This can be useful for developers who want to display information related to the current playback time or display visual feedback to indicate that the seek operation has completed.

Event listener

Here's an example of how to use the seeked event listener:

HTML

<audio id="myAudioPlayer" src="my-audio-file.mp3"></audio>

JavaScript

// Get the audio player element
const audioPlayer = document.getElementById("myAudioPlayer");

// Add the seeked event listener
audioPlayer.addEventListener("seeked", () => {
    // Perform custom behavior when the seeked event is fired
    console.log("User has seeked to a new position in the audio file.");
});

Here, we first retrieve the audio player element using the getElementById method. We then add a seeked event listener to the player using the addEventListener method. The callback function for the event listener simply logs a message to the console when the seeked event is fired.

You can replace the console log statement with your own custom behaviour, such as displaying a message to the user or updating a progress bar.

Property

You can also set an event handler function for the seeked event directly on an element using the onseeked property:

const videoPlayer = document.getElementById("myVideoPlayer");
videoPlayer.onseeked = function() {
  console.log("User has sought to a new position in the video.");
};

This code sets a function as the event handler for the seeked event on the videoPlayer element using the onseeked property. Whenever the user seeks to a new position in the video, the function will be called and the message "User has sought to a new position in the video." will be logged to the console.

Inline

It is also possible to use the seeked event inline in HTML using the onseeked attribute:

HTML

<video id="myVideoPlayer" src="my-video-file.mp4" onseeked="handleSeeked()"></video>

JavaScript

function handleSeeked() {
    console.log("User has seeked to a new position in the video.");
}

Here, we've added the onseeked attribute to the video element with the value set to the name of a function handleSeeked() that will be called whenever the seeked event is fired.

Note that while this approach can be convenient for small scripts or quick prototyping, it is generally considered better practice to use the addEventListener method to attach event listeners in JavaScript rather than inline attributes in HTML. This allows for more separation between the HTML and JavaScript code and makes the code easier to maintain and debug.

Programmatic trigger

The seeked event is typically fired automatically by the browser's media engine whenever the user seeks to a new position in the video or audio file, so it is not typically necessary to programmatically trigger this event. However, if you need to simulate a seek operation for testing or other purposes, you can do so by setting the currentTime property of the media element to a new position and then dispatching the seeked event manually, like this:

const videoPlayer = document.getElementById("myVideoPlayer");

// Seek to a new position
videoPlayer.currentTime = 30;

// Dispatch the seeked event manually
const seekedEvent = new Event("seeked");
videoPlayer.dispatchEvent(seekedEvent);

Here, we first retrieve the videoPlayer element using the getElementById method. We then set the currentTime property to a new position of 30 seconds, simulating a seek operation to that position. Finally, we create a new seeked event using the Event constructor and dispatch it manually using the dispatchEvent method, triggering any event listeners that may be listening for the seeked event.

Note that while programmatically triggering events can be useful in certain cases, it should generally be used sparingly and only when necessary, as it can make code harder to understand and debug.

javascript