HTML Reference Manual

HTML Tag大全

HTML Audio/Video DOM canplaythrough event

The canplaythrough event is triggered when the terminal can play the media file, estimating that enough data has been loaded to play the media to the end without stopping to further buffer content.

　HTML Audio/Video DOM Reference Manual

Online example

Remind that the video can play continuously without stopping:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Audio/Video oncanplaythrough 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.oncanplaythrough=alert("Can play through video without stopping");
</script>　
</body>
</html>

Test to see ‹/›

Definition and usage

When the browser estimates that it can play the specified audio/video without stopping the buffering, the canplaythrough event will occur.

When audio/The following events will occur in sequence when the video is in the process of loading:

Browser compatibility

IEFirefoxOperaChromeSafari

All mainstream browsers support the canplaythrough event.

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

Syntax

In HTML:

<audio|video oncanplaythrough="SomeJavaScriptCode">

In JavaScript:

audio|video.oncanplaythrough=SomeJavaScriptCode;

Use addEventListener():

audio|video.addEventListener("canplaythrough", function()
　 {
　 //SomeJavaScriptCode
　 }
);

Technical Details

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

More examples

Use the oncanplaythrough attribute on HTML elements

Use addEventListener() to listen to the canplaythrough event

　HTML Audio/Video DOM Reference Manual

HTML: <template> tag