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
Play infinitely looping video on-load in HTML5
HTML5 provides built-in support for playing videos that loop infinitely using the loop attribute. This is useful for background videos, animations, or promotional content that should continuously play.
Basic Syntax
The <video> element supports three main video formats: MP4, WebM, and Ogg. To create an infinitely looping video, combine the autoplay and loop attributes:
<video width="600" height="500" autoplay loop> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video element. </video>
Key Attributes
- autoplay: Starts the video automatically when the page loads
- loop: A boolean attribute that restarts the video from the beginning when it ends
- muted: Often required for autoplay to work in modern browsers
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>Infinitely Looping Video</title>
</head>
<body>
<h2>Auto-playing Looped Video</h2>
<video width="400" height="300" autoplay loop muted>
<source src="/videos/sample.mp4" type="video/mp4">
<source src="/videos/sample.webm" type="video/webm">
<source src="/videos/sample.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<p>This video will play automatically and loop infinitely.</p>
</body>
</html>
JavaScript Alternative Method
If the loop attribute doesn't work as expected, you can use JavaScript to handle the looping manually by listening to the ended event:
<video id="myVideo" width="400" height="300" autoplay muted>
<source src="/videos/sample.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
const video = document.getElementById('myVideo');
video.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
});
</script>
Browser Considerations
| Attribute | Purpose | Browser Support |
|---|---|---|
loop |
Built-in infinite looping | All modern browsers |
muted |
Required for autoplay in most browsers | Essential for Chrome, Safari |
autoplay |
Automatic playback on load | Requires muted in modern browsers |
Important Notes
- Most modern browsers require the
mutedattribute for autoplay to work - Always provide multiple video formats for better browser compatibility
- Consider user experience - infinite loops can be distracting or consume bandwidth
- The JavaScript method provides more control over the looping behavior
Conclusion
Use the loop attribute for simple infinite video playback, or implement JavaScript event handling for more complex looping scenarios. Always include the muted attribute when using autoplay for modern browser compatibility.
Updated on: 2026-03-15T23:18:59+05:30
5K+ Views
Advertisements