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 the media is ready to start playing in HTML?
The oncanplay event in HTML is triggered when the browser has enough data to start playing a media element (audio or video) but may need to stop for further buffering. This event is essential for executing scripts when media becomes playable.
Syntax
Following is the syntax for the oncanplay event attribute −
<video oncanplay="functionName()">...</video> <audio oncanplay="functionName()">...</audio>
You can also use the addEventListener method in JavaScript −
element.addEventListener("canplay", function() {
// Your code here
});
Using oncanplay with Video Element
The oncanplay event is commonly used with video elements to execute actions when the video is ready to start playing.
Example
Following example demonstrates how to execute a script when a video is ready to start playing −
<!DOCTYPE html>
<html>
<head>
<title>Video oncanplay Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video Ready Event Demo</h2>
<video id="myVideo" width="400" height="225" controls oncanplay="videoReady()">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support the video element.
</video>
<p id="status">Video status: Loading...</p>
<script>
function videoReady() {
document.getElementById("status").textContent = "Video is ready to play!";
document.getElementById("status").style.color = "green";
document.getElementById("status").style.fontWeight = "bold";
}
</script>
</body>
</html>
When the video has enough data to start playing, the status message changes to green and bold −
Video Ready Event Demo [Video Player with controls] Video status: Video is ready to play! (green, bold text)
Using oncanplay with Audio Element
The oncanplay event works similarly with audio elements to detect when audio is ready for playback.
Example
Following example shows the oncanplay event with an audio element −
<!DOCTYPE html>
<html>
<head>
<title>Audio oncanplay Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Audio Ready Event Demo</h2>
<audio id="myAudio" controls oncanplay="audioReady()">
<source src="https://www.soundjay.com/misc/sounds/bell-ringing-05.wav" type="audio/wav">
<source src="https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<div id="audioStatus" style="margin-top: 10px; padding: 10px; border: 1px solid #ccc;">
Audio Status: Loading...
</div>
<script>
function audioReady() {
var statusDiv = document.getElementById("audioStatus");
statusDiv.textContent = "Audio is ready to play!";
statusDiv.style.backgroundColor = "#e8f5e8";
statusDiv.style.color = "#2e7d2e";
statusDiv.style.borderColor = "#5cb85c";
}
</script>
</body>
</html>
When the audio file is ready to play, the status box changes to a green background with darker green text.
Using addEventListener Method
Instead of using the oncanplay attribute, you can use JavaScript's addEventListener method for better code organization.
Example
Following example demonstrates using addEventListener with the canplay event −
<!DOCTYPE html>
<html>
<head>
<title>addEventListener canplay Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Using addEventListener for canplay Event</h2>
<video id="videoPlayer" width="400" height="225" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
<p id="message">Waiting for video to load...</p>
<ul id="eventLog" style="margin-top: 15px; background: #f5f5f5; padding: 10px;">
<li>Event log:</li>
</ul>
<script>
var video = document.getElementById("videoPlayer");
var message = document.getElementById("message");
var eventLog = document.getElementById("eventLog");
video.addEventListener("canplay", function() {
message.textContent = "Video can start playing!";
message.style.color = "green";
var logItem = document.createElement("li");
logItem.textContent = "canplay event fired at " + new Date().toLocaleTimeString();
eventLog.appendChild(logItem);
});
video.addEventListener("loadstart", function() {
var logItem = document.createElement("li");
logItem.textContent = "loadstart event fired at " + new Date().toLocaleTimeString();
eventLog.appendChild(logItem);
});
</script>
</body>
</html>
This example logs both loadstart and canplay events, showing the sequence of media loading events.
Comparison of Media Events
Different media events are triggered at various stages of media loading and playback −
| Event | When It Fires | Use Case |
|---|---|---|
onloadstart |
When the browser starts loading the media | Show loading indicator |
onloadedmetadata |
When metadata (duration, dimensions) is loaded | Display media information |
oncanplay |
When enough data is available to start playing | Enable play button, show ready status |
oncanplaythrough |
When the entire media can play without stopping | Start autoplay, hide buffering indicators |
onplay |
When the media starts playing | Update UI controls, start timers |
Conclusion
The oncanplay event is essential for detecting when media elements are ready to start playing. Use it to update UI elements, enable controls, or execute initialization scripts when audio or video content becomes playable. For better code organization, consider using addEventListener instead of inline event attributes.
197 Views
