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
How to specify that the audio/video will start over again, every time it is finished in HTML?
Use the loop attribute to specify that the audio/video will start over again every time it is finished. The loop attribute is a boolean attribute that, when present, causes the media to automatically restart from the beginning once it reaches the end.
Syntax
Following is the syntax for the loop attribute −
<video controls loop> <source src="video.mp4" type="video/mp4"> </video>
For audio elements −
<audio controls loop> <source src="audio.mp3" type="audio/mp3"> </audio>
Using Loop with Video Element
The loop attribute works with the HTML5 <video> element to create continuous playback. When the video reaches its end, it automatically restarts from the beginning without user intervention.
Example
Following example demonstrates the loop attribute with a video element −
<!DOCTYPE html>
<html>
<head>
<title>Video Loop Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Video with Loop Attribute</h2>
<video width="400" height="300" controls loop>
<source src="/html5/mov_bbb.mp4" type="video/mp4">
<source src="/html5/mov_bbb.ogg" type="video/ogg">
Your browser does not support the video element.
</video>
<p>This video will automatically restart when it finishes playing.</p>
</body>
</html>
The video will continuously play in a loop, restarting from the beginning each time it reaches the end.
Using Loop with Audio Element
The loop attribute also works with the HTML5 <audio> element to create continuous audio playback.
Example
Following example shows how to use the loop attribute with audio −
<!DOCTYPE html>
<html>
<head>
<title>Audio Loop Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Audio with Loop Attribute</h2>
<audio controls loop>
<source src="/html5/audio.mp3" type="audio/mpeg">
<source src="/html5/audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<p>This audio track will repeat continuously until manually stopped.</p>
</body>
</html>
The audio will play repeatedly in an endless loop until the user manually pauses or stops it.
Controlling Loop with JavaScript
You can also control the loop behavior dynamically using JavaScript by setting the loop property of the media element.
Example
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Loop Control</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Toggle Loop with JavaScript</h2>
<video id="myVideo" width="400" height="300" controls>
<source src="/html5/mov_bbb.mp4" type="video/mp4">
<source src="/html5/mov_bbb.ogg" type="video/ogg">
Your browser does not support the video element.
</video>
<br><br>
<button onclick="enableLoop()">Enable Loop</button>
<button onclick="disableLoop()">Disable Loop</button>
<p id="status">Loop is currently: OFF</p>
<script>
function enableLoop() {
var video = document.getElementById("myVideo");
video.loop = true;
document.getElementById("status").textContent = "Loop is currently: ON";
}
function disableLoop() {
var video = document.getElementById("myVideo");
video.loop = false;
document.getElementById("status").textContent = "Loop is currently: OFF";
}
</script>
</body>
</html>
The buttons allow you to enable or disable the loop functionality dynamically. The status message updates to show the current loop state.
[Enable Loop] [Disable Loop] Loop is currently: OFF
Browser Compatibility
The loop attribute is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. It works consistently across desktop and mobile platforms with HTML5 audio and video elements.
| Feature | Support |
|---|---|
| Video Loop | All HTML5 compatible browsers |
| Audio Loop | All HTML5 compatible browsers |
| JavaScript Control | All modern browsers |
Conclusion
The loop attribute is a simple yet powerful feature that enables continuous playback of audio and video content. By adding loop to your media elements, the content will automatically restart when it reaches the end, creating seamless repeated playback without requiring user interaction.
411 Views
