HTML oncanplay Event Attribute - HTML Media Events 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:

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:

loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythrough

Browser Support of HTML oncanplay Event Attribute

The numbers in the table specify the first browser version that fully supports the 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 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:

html event attributes

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

Read Article
https://develop.horje.com/learn/1434/reference