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 has reached the end of HTML?
The onended attribute in HTML executes a script when media playback reaches its natural end. This event is triggered for <audio> and <video> elements when the media finishes playing, allowing you to display messages, suggest related content, or perform other actions.
Syntax
Following is the syntax for the onended attribute −
<video onended="function()">...</video> <audio onended="function()">...</audio>
The function() represents a JavaScript function that will execute when the media reaches its end.
Video Element with onended
Example
Following example demonstrates the onended attribute with a video element −
<!DOCTYPE html>
<html>
<head>
<title>Video onended Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video with onended Event</h2>
<video width="400" height="300" controls onended="showMessage()">
<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="message" style="color: green; font-weight: bold;"></p>
<script>
function showMessage() {
document.getElementById("message").textContent = "Thank you for watching! Stay tuned for more content.";
}
</script>
</body>
</html>
When the video finishes playing, the message "Thank you for watching! Stay tuned for more content." appears below the video player.
Audio Element with onended
Example
Following example shows the onended attribute with an audio element −
<!DOCTYPE html>
<html>
<head>
<title>Audio onended Event</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Audio with onended Event</h2>
<audio controls onended="playNext()">
<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/mpeg">
Your browser does not support the audio element.
</audio>
<div id="status" style="margin-top: 15px; padding: 10px; background: #f0f8ff; border-radius: 5px;">
Status: Ready to play
</div>
<script>
function playNext() {
document.getElementById("status").innerHTML =
"<strong>Audio finished!</strong> Would you like to play another track?";
}
</script>
</body>
</html>
When the audio finishes playing, the status message updates to suggest playing another track.
Multiple Actions on Media End
You can perform multiple actions when media ends, such as updating UI elements, logging analytics, or automatically playing the next item in a playlist.
Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple Actions on Media End</title>
<style>
.video-container { text-align: center; margin: 20px 0; }
.feedback { margin-top: 15px; padding: 10px; background: #e8f5e8; border-radius: 5px; }
.hidden { display: none; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<div class="video-container">
<h2>Training Video</h2>
<video width="400" height="300" controls onended="handleVideoEnd()">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
<div id="completion-message" class="feedback hidden">
<h3>Video Complete!</h3>
<p>You have successfully watched the entire training video.</p>
<button onclick="resetVideo()">Watch Again</button>
</div>
</div>
<script>
function handleVideoEnd() {
// Show completion message
document.getElementById("completion-message").classList.remove("hidden");
// Log completion (in a real app, this might send data to a server)
console.log("Video completed at: " + new Date().toLocaleTimeString());
// Change page title
document.title = "Video Complete - Training Portal";
}
function resetVideo() {
document.getElementById("completion-message").classList.add("hidden");
document.title = "Multiple Actions on Media End";
document.querySelector("video").currentTime = 0;
}
</script>
</body>
</html>
This example demonstrates multiple actions: showing a completion message, logging to console, changing the page title, and providing a reset option.
Browser Compatibility
The onended attribute is supported by all modern browsers that support HTML5 audio and video elements. It works consistently across Chrome, Firefox, Safari, Edge, and other HTML5-compliant browsers.
Common Use Cases
Educational platforms − Mark lessons as complete and unlock next content
Marketing videos − Show call-to-action buttons or contact forms
Entertainment sites − Suggest related videos or auto-play next episode
Training modules − Record completion status and progress tracking
Conclusion
The onended attribute provides a simple way to execute JavaScript functions when media playback completes naturally. It enables interactive experiences by allowing developers to respond to media completion with messages, analytics tracking, or navigation to related content.
167 Views
