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 media data is loaded in HTML?
The onloadeddata event in HTML is triggered when the browser has loaded the current frame of media data (audio or video). This event fires when enough data has been loaded to render the media at the current playback position, making it useful for executing scripts when media becomes ready for playback.
Syntax
Following is the syntax for the onloadeddata event −
<video onloadeddata="functionName()">...</video> <audio onloadeddata="functionName()">...</audio>
You can also add the event listener using JavaScript −
element.addEventListener("loadeddata", functionName);
Video Element with onloadeddata Event
The onloadeddata event is commonly used with video elements to execute code when video data becomes available for rendering.
Example
Following example shows an alert when video data is loaded −
<!DOCTYPE html>
<html>
<head>
<title>Video onloadeddata Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video Loading Example</h2>
<video width="320" height="240" controls onloadeddata="display()">
<source src="/html5/sample-video.mp4" type="video/mp4">
<source src="/html5/sample-video.ogg" type="video/ogg">
Your browser does not support the video element.
</video>
<p id="status">Video status: Loading...</p>
<script>
function display() {
alert("Video data loaded successfully!");
document.getElementById("status").innerHTML = "Video status: Ready to play";
}
</script>
</body>
</html>
When the video data loads, an alert appears and the status text updates −
Alert: "Video data loaded successfully!" Status changes from "Loading..." to "Ready to play"
Audio Element with onloadeddata Event
The event also works with audio elements to detect when audio data has been loaded.
Example
Following example demonstrates the onloadeddata event with an audio element −
<!DOCTYPE html>
<html>
<head>
<title>Audio onloadeddata Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Audio Loading Example</h2>
<audio controls onloadeddata="audioLoaded()">
<source src="/html5/sample-audio.mp3" type="audio/mpeg">
<source src="/html5/sample-audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<div id="info" style="margin-top: 10px; padding: 10px; background-color: #f0f0f0; border-radius: 5px;">
Audio loading...
</div>
<script>
function audioLoaded() {
document.getElementById("info").innerHTML = "? Audio data loaded and ready to play!";
document.getElementById("info").style.backgroundColor = "#d4edda";
document.getElementById("info").style.color = "#155724";
}
</script>
</body>
</html>
The info box changes color and displays a success message when audio data loads.
Using addEventListener Method
You can also attach the onloadeddata event using JavaScript's addEventListener method for better code organization.
Example
<!DOCTYPE html>
<html>
<head>
<title>addEventListener for onloadeddata</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Media Loading with addEventListener</h2>
<video id="myVideo" width="320" height="240" controls>
<source src="/html5/sample-video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
<p id="message">Waiting for video to load...</p>
<script>
var video = document.getElementById("myVideo");
var message = document.getElementById("message");
video.addEventListener("loadeddata", function() {
message.innerHTML = "Video loaded! Duration: " + Math.round(video.duration) + " seconds";
message.style.color = "green";
message.style.fontWeight = "bold";
});
video.addEventListener("error", function() {
message.innerHTML = "Error loading video";
message.style.color = "red";
});
</script>
</body>
</html>
This example shows both success and error handling, displaying the video duration when data loads successfully.
Media Loading Events Comparison
Understanding when different media events fire helps choose the right event for your needs −
| Event | Description | When it Fires |
|---|---|---|
onloadstart |
Loading begins | Browser starts looking for media data |
onloadedmetadata |
Metadata loaded | Duration, dimensions available but no frame data |
onloadeddata |
Current frame loaded | Enough data to render current playback position |
oncanplay |
Can start playing | Enough data loaded to start playback |
oncanplaythrough |
Can play through | Entire media can play without buffering |
Practical Use Cases
The onloadeddata event is particularly useful for −
-
Showing loading indicators − Hide spinners or progress bars when initial data loads.
-
Displaying media information − Show duration, dimensions, or other metadata once available.
-
Enabling media controls − Activate custom play/pause buttons when media is ready.
-
Analytics tracking − Track successful media loading for performance monitoring.
Conclusion
The onloadeddata event triggers when enough media data has loaded to render the current frame, making it ideal for executing scripts when audio or video becomes ready for playback. Use this event to update UI elements, display media information, or perform initialization tasks once media data is available.
219 Views
