HTML ontimeupdate Attribute

Introduction

The ontimeupdate attribute is an inline event handler that runs JavaScript when the timeupdate event fires on an audio or video element. It fires as the playback position (currentTime) changes — typically several times per second while media plays. Use it to update a time readout, progress bar, or chapter marker. Read element.currentTime and element.duration inside the handler. Prefer addEventListener("timeupdate", …) in production and keep handler work lightweight.

What You’ll Learn

Purpose of ontimeupdate Attribute

The primary purpose of ontimeupdate is to react whenever the media element’s playback clock advances. That makes it the standard hook for custom players: showing elapsed time, moving a seek bar, highlighting transcript lines, or triggering timed annotations.

Unlike onplay or onpause (which fire once per state change), timeupdate fires repeatedly during playback. Plan your handler accordingly — avoid expensive DOM work on every tick.

📝 Syntax

Assign a JavaScript function call or expression to ontimeupdate on audio or video:

<video id="player" controls ontimeupdate="updateTime()">
  <source src="/video/count.mp4" type="video/mp4">
</video>
<p id="timeDisplay">0:00</p>

<script>
  function updateTime() {
    const v = document.getElementById("player");
    document.getElementById("timeDisplay").textContent =
      v.currentTime.toFixed(1) + "s";
  }
</script>

Syntax Rules

• Valid on <audio> and <video> elements.
• Value is JavaScript code executed when the timeupdate event fires.
• Corresponds to the timeupdate event (no on prefix in event name).
• JavaScript property: mediaElement.ontimeupdate = function() { … }.
• Fires during playback when currentTime changes — not when paused.
• Use currentTime (seconds) and duration for UI math.
• Keep handlers fast; throttle heavy work if needed.

💎 Values

ontimeupdate accepts a JavaScript handler — not a fixed keyword list:

• ontimeupdate="updateTime()" — Call a named function.
• ontimeupdate="this.currentTime" — Inline expression (rare; prefer functions).
• element.ontimeupdate = fn — Assign a function object in JavaScript.
• addEventListener("timeupdate", fn) — Modern recommended approach.

<!-- Inline handler -->
<video ontimeupdate="tick()" controls></video>

<!-- Property assignment -->
<script>
  video.ontimeupdate = () => console.log(video.currentTime);
</script>

<!-- addEventListener (preferred) -->
<script>
  video.addEventListener("timeupdate", tick);
</script>

How it Works

While the media plays, the browser updates currentTime and dispatches timeupdate. Your handler runs each time — use it to refresh UI tied to playback position.

Applicable Elements

ontimeupdate vs related media events

Examples Gallery

Inline ontimeupdate time display, dynamic element.ontimeupdate, and a progress bar with addEventListener.

<video id="myVideo" controls ontimeupdate="updateTime()">
  <source src="/video/count.mp4" type="video/mp4">
</video>
<p id="timeDisplay">Current time: 0.00s</p>

<script>
  function updateTime() {
    const video = document.getElementById("myVideo");
    document.getElementById("timeDisplay").textContent =
      "Current time: " + video.currentTime.toFixed(2) + "s";
  }
</script>

<video id="dynamicVideo" controls>
  <source src="/video/count.mp4" type="video/mp4">
</video>

<script>
  const video = document.getElementById("dynamicVideo");
  const display = document.getElementById("timeDisplay");

  video.ontimeupdate = function() {
    display.textContent = "Current time: " + video.currentTime.toFixed(2) + "s";
  };
</script>

<video id="player" controls></video>
<input type="range" id="progress" min="0" max="100" value="0" aria-label="Playback progress">

<script>
  const player = document.getElementById("player");
  const bar = document.getElementById("progress");

  player.addEventListener("timeupdate", () => {
    if (!player.duration) return;
    bar.value = (player.currentTime / player.duration) * 100;
  });
</script>

♿ Accessibility

• Label custom controls — Progress sliders need aria-label or visible labels.
• Use aria-live sparingly — Announcing every timeupdate can overwhelm screen reader users; update visually instead.
• Keep native controls — controls on video/audio provides accessible playback UI out of the box.
• Keyboard seek — Custom seek bars must support keyboard and focus states.
• Captions — Pair timed UI with <track kind="captions"> for accessible media.

💡 Best Practices