HTML Reference Manual

HTML Tag Directory

HTML Audio/Video DOM canplay Event

The canplay event is triggered when the terminal can play the media file, and it is estimated that enough data has been loaded to play the media until the end without stopping to buffer more content.

　HTML Audio/Video DOM Reference Manual

Online Example

Remind that the video is ready to start playing:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Audio/Video oncanplay Event Usage-Basic Tutorial(oldtoolbag.com)</title>
</head>
<body>
<video id="video1" controls="controls">
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.ogg" type="video/ogg">
　　Your browser does not support HTML5　video tag.
</video>
<script>
myVid=document.getElementById("video1");
myVid.oncanplay=alert("Can start playing video");
</script>　
</body>
</html>

Test see if ‹/›

Definition and Usage

When the browser can start playing the specified audio/video (buffered enough to start playing) will trigger the canplay event.

When the audio/The following events will occur in sequence when the video is being loaded:

Browser Compatibility

IEFirefoxOperaChromeSafari

All major browsers support the canplay event.

Note:Internet Explorer 8 and earlier versions do not support this event.

Syntax

In HTML:

<audio|video oncanplay="SomeJavaScriptCode">

In JavaScript:

audio|video.oncanplay=SomeJavaScriptCode;

Use addEventListener():

.addEventListener("canplay", function(){
　
}
);

Technical Details

The following HTML tags support:	<audio>, <video>
The following JavaScript objects support:	Audio, Video

More Examples

Use the oncanplay attribute on HTML elements

Use addEventListener() to listen to the canplay event

　HTML Audio/Video DOM Reference Manual

HTML: <template> tag