The canplaythrough attribute is activated when the browser assumes that certain audio/video can be played without stopping buffering.
Definition and Usage
➔ It triggers a script when the browser estimates it can play the entire video continuously without buffering.
➔ When loading an audio/video, the following events occur.
- loadstart
- durationchange
- loadedmetadata
- loadeddata
- progress
- canplay
- canplaythrough
Syntax
// Using on element
<element oncanplaythrough="myFunction"/>
// Using Javascript object
object.oncanplaythrough = (event) => { };
// Using EventListener
object.addEventListener("canplaythrough", (event) => { });
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML oncanplaythrough attribute example</title>
<meta charset="utf-8" />
</head>
<body>
<h3>HTML oncanplaythrough attribute example</h3>
<div>
<video controls oncanplaythrough="myHandler()">
<!-- "https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4" -->
<source src="demovideo.mp4" type="video/mp4">
</video>
<script>
function myHandler() {
alert(" I can play the entire video continuously without buffering.");
}
</script>
<p>Note: If you set src correctly, the handler will generate a alert.</p>
</div>
</body>
</html>
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| oncanplaythrough | <audio>, <video> |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML oncanplaythrough attribute example</title>
<meta charset="utf-8" />
</head>
<body>
<h3>HTML oncanplaythrough attribute example</h3>
<div>
<video controls id="myvideoid">
<source src="path-ofthe-video.mp4" type="video/mp4">
</video>
<script>
let myvideoid = document.querySelector("#myvideoid");
myvideoid.oncanplay = myHandler;
function myHandler() {
alert(" I can play the entire video continuously without buffering.");
}
</script>
<p>Note: If you set src correctly, the handler will generate a alert.</p>
</div>
</body>
</html>
Click on the "copy" button and try this example in your project.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML oncanplaythrough attribute example</title>
<meta charset="utf-8" />
</head>
<body>
<h3>HTML oncanplaythrough attribute example</h3>
<div>
<video controls id="myvideoid">
<source src="resource-path.mp4" type="video/mp4">
</video>
<script>
let myvideoid = document.querySelector("#myvideoid");
myvideoid.addEventListener("canplay", myHandler);
function myHandler() {
alert(" I can play the entire video continuously without buffering.");
}
</script>
<p>Note: If you set src correctly, the handler will generate a alert.</p>
</div>
</body>
</html>
Click on the "copy" button and try this example in your project.