HTML DOM oncanplay Event
Last Updated :
21 Jun, 2023
The HTML DOM oncanplay event occurs when a specified audio/video is buffered enough to begin.
The order of events occurs During the loading process of an audio/video:
- onloadstart
- ondurationchange
- onloadedmetadata
- onloadeddata
- onprogress
- oncanplay
- oncanplaythrough
Supported Tags
Syntax:
In HTML:
<element oncanplay="myScript">
In JavaScript:
object.oncanplay = function(){myScript};
In JavaScript, using the addEventListener() method:
object.addEventListener("canplay", myScript);
Example: Using HTML
HTML
<!DOCTYPE html>
< html >
< body >
< center >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< h2 >HTML DOM oncanplay event</ h2 >
< video controls oncanplay = "myFunction()" >
< source src =
type = "video/mp4" >
</ video >
< script >
function myFunction() {
alert("Can start playing video");
}
</ script >
</ center >
</ body >
</ html >
|
Output:
Example: Using JavaScript
HTML
<!DOCTYPE html>
< html >
< body >
< center >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< h2 >HTML DOM oncanplay event</ h2 >
< video controls id = "myVideo" >
< source src =
type = "video/mp4" >
</ video >
< script >
document.getElementById(
"myVideo").addEventListener(
"canplay", myFunction);
function myFunction() {
alert("Can start playing video");
}
</ script >
</ center >
</ body >
</ html >
|
Output:
Example: In JavaScript, using the addEventListener() method:
HTML
<!DOCTYPE html>
< html >
< body >
< center >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< h2 >HTML DOM oncanplay event</ h2 >
< video controls id = "myVideo" >
< source src = "Geekfun.mp4" type = "video/mp4" >
</ video >
< script >
document.getElementById(
"myVideo").addEventListener(
"canplay", myFunction);
function myFunction() {
alert("Can start playing video");
}
</ script >
</ center >
</ body >
</ html >
|
Output:
Supported Browsers: The browsers supported by DOM oncanplay Event are listed below:
- Google Chrome 3
- Edge 12
- Internet Explorer 9
- Firefox 3.5
- Apple Safari 3.1
- Opera 10.5
Share your thoughts in the comments
Please Login to comment...