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
Selected Reading
HTML 5 video or audio playlist
HTML5 provides the onended event that fires when audio or video playback completes. This event is essential for creating video playlists, showing completion messages, or automatically loading the next media file.
Basic onended Event Example
The onended event allows you to execute JavaScript when media playback finishes. Here's a simple example that shows a message:
<!DOCTYPE HTML>
<html>
<body>
<video width="300" height="200" controls onended="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>
<script>
function display() {
alert("Thank you for watching! Stay tuned!");
}
</script>
</body>
</html>
Creating a Simple Playlist
You can use the onended event to automatically load the next video in a playlist:
<!DOCTYPE HTML>
<html>
<body>
<video id="videoPlayer" width="400" height="300" controls>
<source src="/videos/video1.mp4" type="video/mp4" />
Your browser does not support the video element.
</video>
<script>
var playlist = [
"/videos/video1.mp4",
"/videos/video2.mp4",
"/videos/video3.mp4"
];
var currentIndex = 0;
var video = document.getElementById('videoPlayer');
video.onended = function() {
currentIndex++;
if (currentIndex < playlist.length) {
video.src = playlist[currentIndex];
video.load(); // Reload the video element
video.play();
} else {
alert("Playlist completed!");
}
};
</script>
</body>
</html>
Advanced Playlist with Controls
Here's a more complete playlist implementation with next/previous controls:
<!DOCTYPE HTML>
<html>
<body>
<video id="playlist-video" width="500" height="300" controls>
<source id="video-source" src="" type="video/mp4" />
Your browser does not support the video element.
</video>
<div>
<button onclick="previousVideo()">Previous</button>
<button onclick="nextVideo()">Next</button>
<span id="video-title"></span>
</div>
<script>
var videos = [
{src: "/videos/intro.mp4", title: "Introduction"},
{src: "/videos/tutorial.mp4", title: "Tutorial"},
{src: "/videos/conclusion.mp4", title: "Conclusion"}
];
var currentVideo = 0;
var videoElement = document.getElementById('playlist-video');
var videoSource = document.getElementById('video-source');
var titleElement = document.getElementById('video-title');
function loadVideo(index) {
if (index >= 0 && index < videos.length) {
videoSource.src = videos[index].src;
titleElement.textContent = videos[index].title;
videoElement.load();
}
}
function nextVideo() {
if (currentVideo < videos.length - 1) {
currentVideo++;
loadVideo(currentVideo);
}
}
function previousVideo() {
if (currentVideo > 0) {
currentVideo--;
loadVideo(currentVideo);
}
}
videoElement.onended = function() {
nextVideo();
};
// Load first video
loadVideo(0);
</script>
</body>
</html>
Key Points
- The
onendedevent fires when media playback reaches the end - Use
video.load()after changing thesrcto reload the video element - Always check array bounds when implementing playlist navigation
- Consider using
addEventListener('ended', callback)for more complex event handling
Conclusion
The onended event is essential for creating video playlists in HTML5. Use it to automatically advance through videos or show completion messages to enhance user experience.
Updated on: 2026-03-15T23:18:59+05:30
869 Views
Advertisements