Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Execute a script when a file can be played all the way to the end without pausing for buffering in HTML?
The oncanplaythrough attribute in HTML5 executes a JavaScript function when a media file (audio or video) can be played all the way through without pausing for buffering. This event fires when the browser estimates that enough data has been loaded to play the media from start to finish at the current playback rate.
Syntax
Following is the syntax for the oncanplaythrough attribute −
<video oncanplaythrough="functionName()"></video> <audio oncanplaythrough="functionName()"></audio>
The functionName() is a JavaScript function that gets executed when the media can play through without buffering interruptions.
How It Works
The oncanplaythrough event is part of the HTML5 media loading process. It occurs after the browser has loaded enough media data to confidently predict that playback can complete without additional buffering stops. This event is particularly useful for preloading scenarios and user interface updates.
Example − Video with oncanplaythrough
Following example demonstrates the oncanplaythrough attribute with a video element −
<!DOCTYPE html>
<html>
<head>
<title>oncanplaythrough Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Video Ready to Play Through</h2>
<video id="myVideo" width="400" height="200" controls oncanplaythrough="display()">
<source src="/html5/foo.mp4" type="video/mp4">
<source src="/html5/foo.ogg" type="video/ogg">
Your browser does not support the video element.
</video>
<p id="status">Loading video...</p>
<script>
function display() {
document.getElementById("status").innerHTML = "Video can be played without pausing for buffering!";
document.getElementById("status").style.color = "green";
}
</script>
</body>
</html>
When the video has loaded enough data to play through completely, the status message changes to green text indicating readiness −
Video Ready to Play Through [Video Player Controls] Video can be played without pausing for buffering! (green text)
Example − Audio with oncanplaythrough
Following example shows the oncanplaythrough attribute with an audio element −
<!DOCTYPE html>
<html>
<head>
<title>Audio oncanplaythrough</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Audio Playback Ready</h2>
<audio controls oncanplaythrough="audioReady()">
<source src="/html5/audio.mp3" type="audio/mpeg">
<source src="/html5/audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<div id="audioStatus" style="margin-top: 10px; padding: 10px; background-color: #f0f0f0;">
Preparing audio...
</div>
<script>
function audioReady() {
var statusDiv = document.getElementById("audioStatus");
statusDiv.innerHTML = "? Audio is ready to play through without buffering!";
statusDiv.style.backgroundColor = "#d4edda";
statusDiv.style.color = "#155724";
}
</script>
</body>
</html>
The audio status updates with a green background when the audio can play through completely without buffering interruptions.
Using addEventListener Method
Instead of the inline oncanplaythrough attribute, you can use JavaScript's addEventListener() method for better code organization −
<!DOCTYPE html>
<html>
<head>
<title>addEventListener for canplaythrough</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Event Listener Approach</h2>
<video id="videoElement" width="400" height="200" controls>
<source src="/html5/sample.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
<p id="message">Video loading...</p>
<script>
var video = document.getElementById("videoElement");
var message = document.getElementById("message");
video.addEventListener("canplaythrough", function() {
message.innerHTML = "Video ready! Can play from start to end without buffering.";
message.style.fontWeight = "bold";
message.style.color = "#28a745";
});
video.addEventListener("loadstart", function() {
message.innerHTML = "Started loading video...";
message.style.color = "#6c757d";
});
</script>
</body>
</html>
This approach separates the HTML structure from JavaScript behavior and allows for multiple event listeners on the same element.
Common Use Cases
The oncanplaythrough event is commonly used for −
Preloading indicators − Hiding loading spinners when media is ready to play through.
Auto-play scenarios − Starting playback automatically when sufficient data is loaded.
User interface updates − Enabling play buttons or showing media duration information.
Progress tracking − Updating loading progress bars to completion status.
Browser Compatibility
The oncanplaythrough attribute is supported in all modern browsers that support HTML5 media elements. This includes Chrome, Firefox, Safari, Edge, and Opera. For older browsers, consider using feature detection or polyfills.
Conclusion
The oncanplaythrough attribute provides a reliable way to detect when HTML5 media files are ready for uninterrupted playback. It's essential for creating smooth user experiences in media-rich web applications and can be used with both inline attributes and event listeners for flexible implementation.
132 Views
