HTML onseeked Attribute

Introduction

The onseeked attribute is an inline event handler that runs JavaScript when the seeked event fires on an audio or video element. It runs after a seek operation completes — when the user finishes dragging the progress bar or when your code sets currentTime and the new position is ready. Use it to update timestamps, sync captions, log analytics, or refresh a custom seek UI. Read media.currentTime inside your handler. Pair with onseeking for when seeking starts. Prefer addEventListener("seeked", …) in production.

What You’ll Learn

Purpose of onseeked Attribute

The primary purpose of onseeked is to react when a seek operation finishes — so your page can update a time label, load a new video segment, sync related UI, or run analytics after the user jumps to a different point in the media.

The seeked event fires on the media element after playback position changes and the browser has reached the new position. It is not the same as seeking (seek in progress) or timeupdate (fires continuously during normal playback).

📝 Syntax

Set onseeked on <audio> or <video>, or assign element.onseeked in JavaScript:

<video controls onseeked="seekedHandler()">
  <source src="/video/count.mp4" type="video/mp4">
</video>

<script>
  media.onseeked = seekedHandler;
  media.addEventListener("seeked", seekedHandler);
</script>

Syntax Rules

• Value is JavaScript executed when the seeked event fires.
• Valid on <audio> and <video> elements.
• Fires after seek completes — user scrubbing or currentTime = ….
• Read element.currentTime for position in seconds.
• Also assignable as element.onseeked in script.
• Modern alternative: addEventListener("seeked", handler).
• Not for non-media elements — use scroll events on containers instead.

💎 Values

The onseeked attribute accepts a string of JavaScript code:

• onseeked="seekedHandler()" — Call a named function.
• onseeked="updateTimeLabel()" — Refresh a custom timestamp display.
• JavaScript: video.onseeked = () => { … } — property assignment.

function seekedHandler() {
  var t = media.currentTime;
  var mins = Math.floor(t / 60);
  var secs = Math.floor(t % 60).toString().padStart(2, "0");
  timeLabel.textContent = "Now at " + mins + ":" + secs;
}

media.addEventListener("seeked", seekedHandler);

Applicable Elements

onseeked vs onseeking vs ontimeupdate

Examples Gallery

Inline video handler, dynamic assignment, and formatted timestamp after seek with addEventListener.

<video controls onseeked="seekedHandler()">
  <source src="/video/count.mp4" type="video/mp4">
</video>
<p id="status"></p>

<script>
  function seekedHandler() {
    document.getElementById("status").textContent =
      "Seek operation completed!";
  }
</script>

<script>
  document.getElementById("myVideo").onseeked = function () {
    log.textContent = "Dynamic seeked handler executed.";
  };
</script>

media.addEventListener("seeked", function () {
  var t = this.currentTime;
  var mins = Math.floor(t / 60);
  var secs = Math.floor(t % 60).toString().padStart(2, "0");
  timeLabel.textContent = "Now at " + mins + ":" + secs;
});

♿ Accessibility

• Keyboard seeking — Native controls support keyboard; custom seek UIs need arrow keys and focus styles.
• Announce position — Use aria-live="polite" when updating a time label after seek.
• Do not autoplay on seek — Respect user intent; seeking should not unexpectedly start loud playback.
• Captions sync — After seeked, ensure subtitle tracks match the new position.
• Visible feedback — Show seek state to all users, not only via console or alerts.

💡 Best Practices