HTML oncanplaythrough Event Attribute

☕

Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

oncanplaythrough

HTML Event AttributeThis event attribute is supported by all modern browsers.

Updated 14th October 2023

Description

The oncanplaythrough HTML event attribute specifies a function to be executed when the browser estimates it can play through the specified audio/video without having to stop for buffering.

This event is typically used to start playing the media when it is ready, or to enable features such as fast-forwarding and rewinding. It is important to note that the oncanplaythrough event is not fired when the media has finished loading, but rather when the browser estimates that it has enough data to play through the entire media file without having to stop for buffering.

The oncanplaythrough event can be specified using the following syntax:

<audio|video oncanplaythrough="functionName()">

Where functionName() is the name of the function to be executed when the event is fired.

The following is an example of how to use the oncanplaythrough event attribute:

<video oncanplaythrough="playVideo()">
  <source src="video.mp4" type="video/mp4">
</video>

<script>
function playVideo() {
  var video = document.querySelector('video');
  video.play();
}
</script>

In this example, the playVideo() function will be executed when the browser estimates it can play through the video.mp4 file without having to stop for buffering.

The oncanplaythrough event is a useful way to ensure that your media content is played smoothly and without interruption.

Syntax

<element oncanplaythrough="script">

Values

scriptThe name of the script to use when the event has been triggered.

Example

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>oncanplaythrough event</title>

</head>

<body>



<audio id="myAudio" controls oncanplaythrough="myFunction()">

  <source src="audio.mp3" type="audio/mpeg">

  Your browser does not support the audio element.

</audio>



<script>

function myFunction() {

    alert("EXAMPLE: Audio file ready to play without buffering");

}

</script> 



<p>Demonstration of the "oncanplaythrough" attribute in the AUDIO element.</p>



</body>

</html>

Result

Open in editor

Browser Support

The following information will show you the current browser support for the HTML oncanplaythrough event attribute. Hover over a browser icon to see the version that first introduced support for this HTML event attribute.

This event attribute is supported by all modern browsers.