HTML oncanplay Attribute - HTML Attribute

Definition and Usage

The oncanplay attribute defines a script to run when the browser can start playing the specified media (when it has buffered enough to begin).

Applies to

The oncanplay attribute is part of the Event Attributes, and can be used on the following elements:

Elements	Event
<audio>	canplay
<embed>	canplay
<object>	canplay
<video>	canplay

Browser Support

The oncanplay attribute has the following browser support for each element:

How to Run "myFunction" when the audio is ready to start playing

Audio Example.

index.html

Example: HTML

<audio id="myAudio" 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>

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

Output should be:

How to Run "myFunction" when the video is ready to start playing

Video Example.

index.html

Example: HTML

<video id="myVideo" width="320" height="176" controls oncanplay="myFunction()">
  <source src="https://www.sample-videos.com/video321/mp4/240/big_buck_bunny_240p_20mb.mp4" type="video/mp4">
  <source src="https://www.sample-videos.com/video321/mp4/240/big_buck_bunny_240p_20mb.mp4" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

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

Output should be:

html oncanplay attribute

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

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