HTML onseeking Attribute

Introduction

The onseeking attribute is an inline event handler that runs JavaScript when the seeking event fires on an audio or video element. It runs when a seek operation starts — as the user begins dragging the progress bar or when your code sets currentTime. Use it to show a loading indicator, disable custom controls, or pause related animations while the browser jumps to a new position. Check media.seeking (true during seek). Pair with onseeked when seeking finishes. Prefer addEventListener("seeking", …) in production.

What You’ll Learn

Purpose of onseeking Attribute

The primary purpose of onseeking is to react when a seek operation begins — so your page can show “buffering” feedback, temporarily disable buttons, hide stale captions, or prepare UI before the new playback position is ready.

The seeking event fires on the media element when playback position is about to change. It is the counterpart to seeked, which fires when seeking is complete. Together they cover the full seek lifecycle.

📝 Syntax

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

<video controls onseeking="handleSeeking()">
  <source src="/video/count.mp4" type="video/mp4">
</video>

<script>
  media.onseeking = handleSeeking;
  media.addEventListener("seeking", handleSeeking);
</script>

Syntax Rules

• Value is JavaScript executed when the seeking event fires.
• Valid on <audio> and <video> elements.
• Fires when seek starts — user scrubbing or currentTime = ….
• Check element.seeking — true while seek is in progress.
• Also assignable as element.onseeking in script.
• Modern alternative: addEventListener("seeking", handler).
• Pair with onseeked for seek-complete logic.

💎 Values

The onseeking attribute accepts a string of JavaScript code:

• onseeking="handleSeeking()" — Call a named function.
• onseeking="showSpinner()" — Show loading UI during scrub.
• JavaScript: video.onseeking = () => { … } — property assignment.

function handleSeeking() {
  status.textContent = "Seeking…";
  status.classList.add("is-seeking");
}

function handleSeeked() {
  status.textContent = "Ready at " + formatTime(media.currentTime);
  status.classList.remove("is-seeking");
}

media.addEventListener("seeking", handleSeeking);
media.addEventListener("seeked", handleSeeked);

Applicable Elements

onseeking vs onseeked vs ontimeupdate

Examples Gallery

Inline video handler, dynamic assignment, and paired seeking + seeked status labels.

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

<script>
  function handleSeeking() {
    document.getElementById("status").textContent = "Seeking…";
  }
</script>

<script>
  document.getElementById("dynamicVideo").onseeking =
    function () {
      log.textContent = "Seeking event detected!";
    };
</script>

media.addEventListener("seeking", function () {
  status.textContent = "Seeking…";
  status.setAttribute("aria-busy", "true");
});

media.addEventListener("seeked", function () {
  status.textContent = "Now at " + formatTime(this.currentTime);
  status.removeAttribute("aria-busy");
});

♿ Accessibility

• Announce seek state — Use aria-busy="true" and aria-live="polite" during seeking.
• Keyboard seeking — Native controls support keyboard; custom seek UIs need arrow keys and focus styles.
• Do not block controls — Disabling UI during seek should be brief and reversible.
• Visible feedback — Show seek-in-progress to all users, not only via console or alerts.
• Captions — Hide or dim stale subtitles during seek until seeked syncs the new position.

💡 Best Practices