References

Beginner-friendly references for web development, with live, editable examples.

The HTML onseeking event

Event All modern browsers By David AdamsUpdated
In short

The HTML onseeking attribute runs JavaScript when audio or video starts jumping to a new position. With <video onseeking="showSpinner()">, a spinner appears when someone drags the progress bar, and seeking stays true until the jump is complete.

Overview

The HTML onseeking attribute runs code on <audio> and <video> elements when a jump to a new position begins. The browser then loads and decodes the data for that position in the background.

Setting currentTime from a script starts a seek, and so does dragging or clicking the progress bar in the controls. A looping video seeks back to the start at its end, so seeking fires each time it wraps around.

The handler runs before the frame at the new position is ready to show, so a loading indicator started there covers the wait.

Syntax

<video src="clip.mp4" controls onseeking="showSpinner()"></video>

Example

Live example 
<video id="clip" src="https://codeshack.io/web/example.mp4" controls muted width="240"
  onseeking="seekStart(this)" onseeked="seekEnd(this)"></video>
<p><button type="button" id="jump">Jump to 10 s</button></p>
<p id="msg" role="status">Drag the progress bar or press the button.</p>
<script>
function seekStart(video) {
  document.getElementById('msg').textContent = 'Seeking to ' + video.currentTime.toFixed(1) + ' s...';
}
function seekEnd(video) {
  document.getElementById('msg').textContent = 'Ready at ' + video.currentTime.toFixed(1) + ' s';
}
document.getElementById('jump').addEventListener('click', function () {
  document.getElementById('clip').currentTime = 10;
});
</script>

Best practices

  • Show a loading state in onseeking and remove it in onseeked. A slow jump on a weak connection then doesn't look like a frozen player.
  • Read video.seeking before starting work that needs a settled frame. The property stays true for the whole jump.
  • Keep the handler light enough to run many times in a row, since one drag along the progress bar can fire several seeking events.
  • Use currentTime for exact jumps. The fastSeek() method trades precision for speed, and Firefox and Safari support it but Chrome doesn't.

Accessibility

Pair an onseeking spinner with readable text. An element with role="status" is a live region, so when a message such as "Loading" changes inside one, the browser exposes the change to assistive technology. A purely visual spinner gives the browser nothing to expose.

Frequently asked questions

What does onseeking do?
The onseeking attribute runs JavaScript when an audio or video element begins jumping to a new position.
What triggers the seeking event?
The seeking event fires when code sets currentTime, someone moves the progress bar, or a looping video wraps. Normal playback doesn't, and neither does a new source unless it sets a start time, as a URL ending in #t=10 does.
What is the difference between onseeking and onseeked?
The seeking event fires when a jump to a new position starts, and seeked fires when it is done.
Is currentTime already updated inside onseeking?
Yes, currentTime already holds the new target position inside the onseeking handler. Use onseeked when the code needs the frame at that position to be ready.
Does the seeking event bubble?
No, the seeking event doesn't bubble, so a parent element receives it only through a capture listener. Pass true as the third argument, as in box.addEventListener('seeking', show, true), or listen on the media element itself.
onseeked onselect