HTML oncanplaythrough Event Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

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

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.