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 file is unavailable in HTML?
The onemptied attribute in HTML is an event handler that executes JavaScript code when a media element (audio or video) becomes unavailable or empty. This event typically occurs when the media file cannot be loaded, the playlist becomes empty, or the media source is removed during playback.
Syntax
Following is the syntax for the onemptied attribute −
<video onemptied="script"></video> <audio onemptied="script"></audio>
The script parameter contains JavaScript code or a function call that executes when the emptied event is triggered.
When the Emptied Event Occurs
The emptied event is fired in the following scenarios −
The media file becomes unavailable or corrupted
The media source is changed to an invalid or non-existent file
The playlist becomes empty
The media element is reset or reloaded with no valid source
Example − Video File Unavailable
Following example demonstrates the onemptied attribute with a video element that references a non-existent file −
<!DOCTYPE html>
<html>
<head>
<title>onemptied Attribute Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Video with Unavailable File</h2>
<video width="300" height="200" controls onemptied="handleEmptied()">
<source src="/html5/nonexistent.mp4" type="video/mp4">
<source src="/html5/nonexistent.ogg" type="video/ogg">
Your browser does not support the video element.
</video>
<p id="message"></p>
<script>
function handleEmptied() {
document.getElementById("message").innerHTML = "?? Media file is unavailable or empty!";
console.log("Emptied event triggered");
}
</script>
</body>
</html>
When the browser attempts to load the non-existent video files, the emptied event fires and displays a warning message.
Example − Audio Element with Error Handling
Following example shows the onemptied attribute used with an audio element −
<!DOCTYPE html>
<html>
<head>
<title>Audio onemptied Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Audio Player with Error Detection</h2>
<audio controls onemptied="showError()" onerror="showError()">
<source src="/audio/missing-file.mp3" type="audio/mpeg">
<source src="/audio/missing-file.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
<div id="status" style="margin-top: 10px; padding: 10px; border-radius: 4px;"></div>
<script>
function showError() {
var status = document.getElementById("status");
status.innerHTML = "? Audio file could not be loaded. Please check the file path.";
status.style.backgroundColor = "#ffebee";
status.style.color = "#c62828";
status.style.border = "1px solid #f44336";
}
</script>
</body>
</html>
This example combines both onemptied and onerror events to provide comprehensive error handling for missing audio files.
Example − Dynamic Source Change
Following example demonstrates how the emptied event triggers when changing media sources dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Source Change</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Change Video Source</h2>
<video id="myVideo" width="300" height="200" controls
onemptied="onEmptied()"
onloadstart="onLoadStart()">
<source src="/valid-video.mp4" type="video/mp4">
</video>
<br><br>
<button onclick="changeToInvalid()">Change to Invalid Source</button>
<button onclick="changeToValid()">Change to Valid Source</button>
<p id="log" style="background: #f5f5f5; padding: 10px; border-radius: 4px;"></p>
<script>
function onEmptied() {
log("? Media emptied - source unavailable");
}
function onLoadStart() {
log("?? Loading new media source...");
}
function changeToInvalid() {
var video = document.getElementById("myVideo");
video.src = "/invalid-video.mp4";
video.load();
}
function changeToValid() {
var video = document.getElementById("myVideo");
video.src = "https://www.w3schools.com/html/mov_bbb.mp4";
video.load();
}
function log(message) {
document.getElementById("log").innerHTML += message + "<br>";
}
</script>
</body>
</html>
This example shows how the emptied event is triggered when switching between valid and invalid media sources, providing real-time feedback about the media loading state.
Browser Compatibility
The onemptied attribute is supported by all modern browsers that support HTML5 video and audio elements. It works consistently across Chrome, Firefox, Safari, Edge, and Opera. The event is part of the HTML5 Media Events specification and provides reliable cross-browser functionality for handling media loading issues.
Conclusion
The onemptied attribute provides a reliable way to detect when media files become unavailable or empty in HTML5 video and audio elements. Use this event handler to implement user-friendly error messages and fallback mechanisms when media content cannot be loaded or becomes corrupted during playback.
245 Views
