HTML oncanplaythrough Attribute

Introduction

The oncanplaythrough attribute is an inline event handler that runs JavaScript when the canplaythrough event fires. That happens on <audio> and <video> when the browser estimates enough media is buffered to play through to the end without stopping to load more data. Use it to hide loading overlays, enable confident autoplay, or show “ready” status. It is stronger than oncanplay (which only means playback can start) but is still an estimate—not a guarantee on slow networks.

What You’ll Learn

Purpose of oncanplaythrough Attribute

The primary purpose of oncanplaythrough is to react when buffering looks sufficient for uninterrupted playback. You might remove a full-screen loader, enable a custom player, or start autoplay (where policy allows). It typically fires after canplay once more of the file has buffered.

The old reference mixed up titles (calling an example “onprogress”) and function names. Also remember: canplaythrough is the browser’s estimate, not a promise that buffering will never pause. Seeking or poor connectivity can still trigger waiting later.

📝 Syntax

Set oncanplaythrough on audio or video, or assign element.oncanplaythrough:

<script>

  function handleCanPlayThrough() {

    console.log("Media can play through.");

  }

</script>



<video controls oncanplaythrough="handleCanPlayThrough()">

  <source src="clip.mp4" type="video/mp4">

</video>

Syntax Rules

• Value is JavaScript code executed when the canplaythrough event fires.
• Applies to <audio> and <video> media elements.
• Fires when the browser estimates uninterrupted playback is possible.
• JavaScript: media.oncanplaythrough = function() { … }.
• Modern alternative: media.addEventListener("canplaythrough", handler).
• Usually follows canplay in the media load sequence.

💎 Values

The oncanplaythrough attribute accepts a string of JavaScript code:

• oncanplaythrough="handleCanPlayThrough()" — Call a named function.
• oncanplaythrough="hideLoader()" — Inline statement.
• JavaScript: video.oncanplaythrough = () => { … } assigns the handler.

const video = document.getElementById("clip");

video.addEventListener("canplaythrough", () => {

  document.getElementById("loader").hidden = true;

});

video.addEventListener("canplay", () => {

  document.getElementById("playBtn").disabled = false;

});

Applicable Elements

oncanplay vs oncanplaythrough vs onloadeddata

Examples Gallery

Inline oncanplaythrough on video, addEventListener, and comparison with oncanplay.

<video controls oncanplaythrough="handleCanPlayThrough()">

  <source src="clip.mp4" type="video/mp4">

</video>



<script>

  function handleCanPlayThrough() {

    console.log("Media can play through.");

  }

</script>

<script>

  document.getElementById("clip").addEventListener("canplaythrough", function () {

    console.log("Video can play through.");

  });



  // Or property form:

  document.getElementById("clip").oncanplaythrough = function () { /* … */ };

</script>

audio.addEventListener("canplay", () => { /* can start */ });

audio.addEventListener("canplaythrough", () => { /* can play through */ });

♿ Accessibility

• Provide captions and transcripts — Media events do not replace accessible alternatives for audio and video content.
• Do not autoplay with sound — Respect user preferences; use canplay to enable controls, not surprise playback.
• Avoid alert() on canplay — Update visible status or hide loaders instead of blocking dialogs.
• Keyboard controls — Native controls attribute supports keyboard users; custom players need full keyboard support.
• Loading state — Announce buffer readiness to assistive tech with live regions if you hide native controls.

💡 Best Practices