**`loop`** is a boolean attribute — once playback reaches the end, the browser immediately restarts it from the beginning, repeating indefinitely until the user pauses it (if controls are present) or navigates away. It's commonly combined with `autoplay` and `muted` for background-style video loops, or used on short sound effect clips and ambient audio tracks that should play continuously.
1Understanding loop
`loop` is a boolean attribute — once playback reaches the end, the browser immediately restarts it from the beginning, repeating indefinitely until the user pauses it (if controls are present) or navigates away. It's commonly combined with autoplay and muted for background-style video loops, or used on short sound effect clips and ambient audio tracks that should play continuously.
For a genuinely seamless loop, make sure the source file's first and last frames (or audio waveform) match closely — otherwise viewers will notice a visible or audible 'jump' at the repeat point, regardless of the loop attribute working correctly.
<audio loop>
<source src="/rain-ambience.mp3" type="audio/mpeg">
</audio>2Practical Example
Here is a real-world application of loop showing how it is used in production HTML.
<!-- A seamlessly looping muted background video -->
<video autoplay muted loop playsinline>
<source src="/waves.mp4" type="video/mp4">
</video>3Best Practices
Follow these guidelines when working with loop:
1. Use loop for background ambience video/audio or short repeating sound effects
2. Combine with autoplay and muted for silent, continuously-looping background video
3. Ensure the source media's start and end points blend smoothly for a seamless-feeling loop
Tip: For a genuinely seamless loop, make sure the source file's first and last frames (or audio waveform) match closely — otherwise viewers will notice a visible or audible 'jump' at the repeat point, regardless of the loop attribute working correctly.
<audio loop>
<source src="/rain-ambience.mp3" type="audio/mpeg">
</audio>