JavaScript Document seeked Event: The Complete Guide

JavaScript provides various events to enhance the interactivity and functionality of web pages. One such essential event is the seeked event. This guide will explain everything you need to know about the seeked event. We’ll cover what it is, why it’s useful, where to use it, how to implement it, and when it comes into play. Let’s dive in!

What is the seeked Event?

The seeked event in JavaScript is fired when the seeking process to a new position in the media is complete. This occurs after the user has moved or jumped to a new position in the media playback.

Why Use the seeked Event?

Using the seeked event is beneficial because it allows you to track when a user has completed seeking through media. This can be useful for updating the user interface, synchronizing actions with media playback, or providing feedback to users about the media’s new position.

Where Can You Use the seeked Event?

You can use the seeked event on media elements like <audio> and <video>. This event is particularly useful in web applications that include media playback and need to handle user interactions with the seek bar.

How to Use the seeked Event

Let’s dive into some examples to see how the seeked event works in different scenarios.

Basic Example

Here’s a simple example to show how the seeked event works with a video element.

<video id="video" controls>
  <source src="sample-video.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>
<p id="status">Status: Ready to play ⏯️</p>

<script>
  const video = document.getElementById("video");
  const status = document.getElementById("status");

  video.addEventListener("seeked", () => {
    status.textContent = `Playback position changed to ${video.currentTime.toFixed(1)}s ⏩`;
    console.log(`The user has finished seeking. New position: ${video.currentTime.toFixed(1)} seconds.`);
  });
</script>

In this example, a message is displayed and logged to the console when the user completes seeking.

Example with Loading Indicator

Let’s see how the seeked event can be used to hide a loading indicator after seeking is complete.

<style>
  #loading {
    display: none;
    color: red;
  }
</style>
<video id="video" controls>
  <source src="sample-video.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>
<p id="loading">Loading... ⏳</p>

<script>
  const video = document.getElementById("video");
  const loadingIndicator = document.getElementById("loading");

  video.addEventListener("seeking", () => {
    loadingIndicator.style.display = "block";
    console.log("Displaying loading indicator...");
  });

  video.addEventListener("seeked", () => {
    loadingIndicator.style.display = "none";
    console.log("Hiding loading indicator...");
  });
</script>

In this example, a loading indicator is displayed when the user is seeking and hidden when the seeking is complete.

Example with Synchronized Actions

Let’s see how the seeked event can be used to synchronize actions with media playback.

<video id="video" controls>
  <source src="sample-video.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>
<p id="action">Action: None</p>

<script>
  const video = document.getElementById("video");
  const actionDisplay = document.getElementById("action");

  video.addEventListener("seeking", () => {
    actionDisplay.textContent = "Action: Seeking... 🔍";
    console.log("The user is seeking through the video.");
  });

  video.addEventListener("seeked", () => {
    actionDisplay.textContent = `Action: Position changed to ${video.currentTime.toFixed(1)}s ⏩`;
    console.log(`Playback position changed to ${video.currentTime.toFixed(1)} seconds.`);
  });
</script>

In this example, actions are displayed and logged to the console when the user is seeking and when the seeking is complete.

When to Use the seeked Event

The seeked event is particularly useful in scenarios where:

• You need to track and respond to user interactions with the seek bar.
• You want to display loading indicators or feedback to users.
• You need to synchronize actions with media playback when the user changes the playback position.

Comparing seeked with Other Media Events

To understand the seeked event better, let’s compare it with other common media events like seeking, play, and pause.

Code Examples of Different Events

Here’s how you can use some of these events in your code:

<video id="video" controls>
  <source src="sample-video.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>
<p id="status">Monitoring media events... ⏳</p>

<script>
  const video = document.getElementById("video");
  const status = document.getElementById("status");

  video.addEventListener("seeking", () => {
    status.textContent = "Seeking... 🔍";
  });

  video.addEventListener("seeked", () => {
    status.textContent = `Playback position changed to ${video.currentTime.toFixed(1)}s ⏩`;
  });

  video.addEventListener("play", () => {
    status.textContent = "Playing ▶️";
  });

  video.addEventListener("pause", () => {
    status.textContent = "Paused ⏸️";
  });

  video.addEventListener("timeupdate", () => {
    status.textContent = `Current time: ${video.currentTime.toFixed(1)}s ⏲️`;
  });
</script>

Conclusion

The seeked event in JavaScript is a powerful tool for handling user interactions with the seek bar in media playback. By understanding and using this event, you can create more interactive and user-friendly web applications. Whether you are tracking seeking actions, displaying loading indicators, or synchronizing actions with media playback, the seeked event helps you ensure that your media elements work smoothly and effectively.

Summary

• What: The seeked event fires when the user completes moving to a new playback position in a media element.
• Why: It helps in tracking seeking actions, displaying loading indicators, and synchronizing actions with media playback.
• Where: Use it on media elements like <audio> and <video> to detect when the user has finished seeking through the media.
• How: By adding an event listener for seeked and handling the necessary actions.
• When: Use it whenever you need to manage actions triggered by user interactions with the seek bar to improve user experience.

Feel free to use the examples provided and modify them to suit your needs. Happy coding! 🎉