Horje
HTML oncanplay Event Attribute
The HTML oncanplay event attribute defines a script to be executed when the browser can begin playing a specified audio or video element. This occurs when the browser has buffered enough media data to start playback without immediate interruptions for further buffering.

Example of HTML oncanplay Event Attribute

It will execute a JavaScript when a video is ready to start playing.
index.html
Example: HTML
 <script>
function myFunction() {
  alert("Can start playing video");
}
</script>

<video oncanplay="myFunction()"> 

Output should be:

Example of HTML oncanplay Event Attribute

Definition and Usage of HTML oncanplay Event Attribute

The oncanplay attribute fires when the browser can start playing the specified audio/video.

During the loading process of an audio/video, the following event attributes occur, in this order:

  1. loadstart
  2. durationchange
  3. loadedmetadata
  4. loadeddata
  5. progress
  6. canplay
  7. canplaythrough

Browser Support of HTML oncanplay Event Attribute

The numbers in the table specify the first browser version that fully supports the event attribute.

Browser Support of HTML oncanplay Event Attribute

Syntax of HTML oncanplay Event Attribute

<element oncanplay="script">

Attribute Values of HTML oncanplay Event Attribute

Value Description
script The script to be run on oncanplay

Technical Details of HTML oncanplay Event Attribute

Supported HTML tags: <audio> and <video>

How to execute a JavaScript when a video is ready to start playing

It will show up a popup that video can start.

index.html
Example: HTML
<!DOCTYPE html> 
<html> 
<body> 

<script>
function myFunction() {
  alert("Can start playing video");
}
</script>

<video controls oncanplay="myFunction()">
  <source src="https://download.samplelib.com/mp4/sample-5s.mp4" type="video/mp4">
  <source src="https://download.samplelib.com/mp4/sample-5s.mp4" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>


</body> 
</html>

Output should be:

How to execute a JavaScript when a video is ready to start playing

How to execute a JavaScript when an audio is ready to start playing

It will show up a popup that audio is ready to play.

index.html
Example: HTML
<!DOCTYPE html> 
<html> 
<body> 

<script>
function myFunction() {
  alert("Can start playing audio");
}
</script>

<audio controls oncanplay="myFunction()">
  <source src="https://download.samplelib.com/mp3/sample-3s.mp3" type="audio/ogg">
  <source src="https://download.samplelib.com/mp3/sample-3s.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

</body> 
</html>

Output should be:

How to execute a JavaScript when an audio is ready to start playing




html event attributes

Related Articles
List of Media Events Media Events Attribute
HTML onabort Event Attrribute Media Events Attribute
HTML oncanplay Event Attribute Media Events Attribute
HTML oncanplaythrough Event Attribute Media Events Attribute
HTML ondurationchange Event Attribute Media Events Attribute
HTML onended Event Attribute Media Events Attribute

Single Articles
Example of HTML oncanplay Event AttributeMedia Events Attribute
Definition and Usage of HTML oncanplay Event AttributeMedia Events Attribute
Browser Support of HTML oncanplay Event AttributeMedia Events Attribute
Syntax of HTML oncanplay Event AttributeMedia Events Attribute
Attribute Values of HTML oncanplay Event AttributeMedia Events Attribute
Technical Details of HTML oncanplay Event AttributeMedia Events Attribute
How to execute a JavaScript when a video is ready to start playingMedia Events Attribute
How to execute a JavaScript when an audio is ready to start playingMedia Events Attribute

Type:
Develop
Category:
Web Tutorial
Sub Category:
Media Events Attribute
Uploaded by:
Admin


Reffered: https://www.w3schools.com/tags/ev_oncanplay.asp