How to loop video playback in HTML

October 14, 2024
8 mIn
Video Engineering
Jump to
Share
This is some text inside of a div block.

Whether it’s a background video for your website or a promotional reel, looping video playback can add a dynamic touch to your content. Thanks to HTML5, setting up a continuous video loop is as simple as hitting ‘repeat.’ In this guide, we’ll show you how to effortlessly create that infinite loop using the <video> tag, complete with practical and fun code examples to keep your videos running smoothly.

Understanding the <video> tag

The HTML5 <video> tag is a tool for embedding video content directly into web pages, providing a native way to handle media without relying on third-party plugins like Flash. It supports a range of attributes that can greatly enhance the user experience by offering interactive controls such as play, pause, volume adjustment, and even full-screen mode. One key attribute is loop, which is particularly useful when you want the video to play continuously without user intervention. By adding the loop attribute to the <video> tag, the video will automatically restart from the beginning every time it finishes, creating a smooth, uninterrupted playback experience. This feature is especially valuable for background videos, tutorials, and promotional content, where constant repetition can be part of the design or user flow.

What is the loop attribute?

The loop attribute is a boolean attribute that controls whether a media file should automatically restart once it reaches the end. When applied to the <audio> or <video> elements, it ensures that the media plays continuously in a loop until manually stopped by the user. This functionality is particularly useful for background music, animations, or videos where continuous playback is desired without interruption. By simply adding the loop attribute, you can enable seamless, automatic repetition of the media.

Basic Syntax

To loop a video, you simply need to add the loop attribute to your <video> tag. Here’s a basic example:

1<video width="640" height="360" controls loop> 
2     <source src="https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4" type="video/mp4"> 
3     <source src="https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.ogg" type="video/ogg"> 
4
5       <!-- Your browser does not support the video tag. -->
6</video> 

Breakdown of the code

  1. HTML structure: The code begins with standard HTML structure, including the <!DOCTYPE html> declaration and <html> tags.
  1. Video tag:
    • The <video> tag includes attributes:
      • width and height: Define the dimensions of the video player.
      • controls: Provides play, pause, and volume controls for users.
      • loop: Ensures that the video restarts automatically after reaching the end.
  1. Source tags:
    • The <source> tags specify the video files and their formats (MP4 and OGG). This allows browsers to select the best format they can play.
  1. Fallback content: If the browser does not support the <video> tag, a message is displayed indicating that the browser does not support video playback.

Additional attributes

You can enhance your looping video by combining other attributes:

  • Autoplay: Automatically starts playing the video when the page loads.
  • Muted: Required by some browsers for autoplay to work without user interaction.

Here’s how you can implement these attributes:

1<video width="640" height="360" controls loop autoplay muted> 
2    <source src="https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4" type="video/mp4"> 
3    <source src="https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.ogg" type="video/ogg"> 
4
5   <!-- Your browser does not support the video tag. -->
6</video> 

How to add loop using JavaScript

The loop attribute in HTML allows audio and video elements to play continuously without user intervention. While you can easily set this attribute directly in your HTML, there are scenarios where you might want to manipulate it using JavaScript.

Here’s a simple example demonstrating how to add the loop attribute to a video element using JavaScript:

1<video id="myVideo" width="640" height="360" controls> 
2        <source src="your-video" type="video/mp4"> 
3        
4        <!-- Your browser does not support the video tag. -->
5</video> 
6
7<button id="enableLoop">Enable Loop</button> 
8<button id="disableLoop">Disable Loop</button> 
9
10<script> 
11        const video = document.getElementById("myVideo"); 
12
13        // Function to enable loop 
14        document.getElementById("enableLoop").onclick = function() { 
15
16            video.loop = true; // Set loop property to true 
17            alert("Looping enabled!"); 
18        }; 
19        
20        // Function to disable loop 
21        document.getElementById("disableLoop").onclick = function() { 
22            video.loop = false; // Set loop property to false 
23            alert("Looping disabled!"); 
24        }; 
25</script> 

Breakdown of the code

  1. HTML structure:
    • The <video> element includes a source for the video file and has an ID of myVideo.
    • Two buttons are provided: one to enable looping and another to disable it.
  1. JavaScript logic:
    • The script retrieves the video element using document.getElementById().
    • Two functions are defined for enabling and disabling the loop:
      • Enable loop: Sets the loop property to true.
      • Disable loop: Sets the loop property to false.
  1. User interaction:
    • When a user clicks on "Enable loop," an alert confirms that looping is enabled, and similarly for disabling it.

Loop attribute browser compatibility

Most modern browsers support the <video> tag and its attributes, including loop. Here’s a quick compatibility overview:

Browser Version Support
Google Chrome 4.0 and above
Firefox 11.0 and above
Safari 3.1 and above
Edge 12.0 and above
Opera 10.5 and above

Optimizing performance when using the loop attribute

While looping video playback can enhance user engagement, it's important to consider its impact on performance, especially in terms of bandwidth, CPU usage, and memory consumption. Continuous video playback can place strain on both the server (in terms of delivering the content) and the client device (in terms of processing the video).

  1. Bandwidth impact: Looping high-quality videos can consume significant bandwidth, especially if users remain on the page for extended periods. This can lead to slower page load times and increased data usage for users.

    Optimization tip
    : For background or ambient videos, consider using lower bitrate versions to reduce bandwidth consumption. You can use FastPix's adaptive bitrate streaming to deliver optimized video quality based on the user's network conditions.

  2. CPU and memory usage: Processing continuous video playback can cause high CPU and memory usage, particularly on low-powered devices like mobile phones. This can result in sluggish performance or device overheating.

    Optimization tip: Minimize the video resolution and bitrate for background videos to reduce the processing load. Additionally, limit the number of concurrent video elements on a page.

  3. Preloading videos: Preloading can improve performance by loading the video content before the user interacts with it, ensuring smooth playback without buffering.

    Optimization tip: Use the <video preload="auto"> attribute to preload the video metadata or content, depending on your needs. For background videos that don’t require immediate playback, consider using preload="metadata" to reduce the initial load.

  4. Lazy loading: Lazy loading allows video elements to load only when they are about to come into the user's viewport, improving initial page load times and reducing resource consumption.

    Optimization tip: Implement lazy loading for offscreen videos, especially for pages with multiple videos. You can use a JavaScript-based lazy loading library or HTML attributes like loading="lazy" to achieve this.

Why loop attribute may not work: Common issues and solutions

The loop attribute in HTML is a powerful feature that allows audio and video elements to play continuously without user intervention. However, there are several reasons why the loop functionality may not work as expected. This article will explore common issues that can prevent the loop attribute from functioning correctly and provide solutions to address them.

1. Browser compatibility

Issue: While most modern browsers support the loop attribute, there may be inconsistencies in older versions or less common browsers.

Solution: Ensure that you are using a modern browser version. Always test your media on multiple browsers (e.g., Chrome, Firefox, Safari, Edge) to confirm compatibility. If you find that the loop feature is not working in a specific browser, consider checking the browser's documentation for any known issues.

2. Autoplay restrictions

Issue: Many browsers have implemented autoplay restrictions that prevent videos from playing automatically unless certain conditions are met (e.g., being muted).

Solution: If you want to use the autoplay attribute alongside loop, ensure that the video is muted. For example:

HTML

1<video autoplay loop muted>  
2    <source src="your-video-file.mp4" type="video/mp4">  
3</video> 

3. JavaScript interference

Issue: If you are manipulating the video element using JavaScript, other scripts may inadvertently override or conflict with the loop setting.

Solution: Check your JavaScript code for any conflicting properties or functions that may reset or alter the loop attribute after it has been set. Ensure that your script runs after the video element has fully loaded.

4. Incorrect HTML structure

Issue: If the HTML structure is incorrect, such as missing closing tags or improperly nested elements, it may lead to unexpected behavior.

Solution: Validate your HTML code to ensure it follows proper syntax and structure. Use tools like W3C Validator to check for errors.

5. Media format issues

Issue: Some video formats may not support looping correctly due to encoding issues or incompatibility with certain browsers.

Solution: Ensure that your media files are encoded in widely supported formats like MP4 (H.264 codec) for videos and MP3 for audio. Test your media files in different formats to see if the issue persists.

6. User interaction requirement

Issue: In some cases, user interaction may be required before media playback can occur, especially for autoplay videos.  

Solution: If looping is not working because of user interaction requirements, consider prompting users to click a play button first. After they interact with the page, you can then enable looping:

Javascript

1document.getElementById("playButton").onclick = function() {  
2    video.play();  
3    video.loop = true; // Enable looping after user interaction  
4}; 

7. Network issues

Issue: If the media file is hosted remotely and there are network issues or delays in loading, it may affect playback and looping functionality.

Solution: Ensure that your media files are hosted on reliable servers and check for network connectivity issues. Consider using local files during development to rule out network-related problems.

Cut Video Cloud Costs by 8X, No Performance Loss

Know more

Use cases for looping video playback

1. Background videos for websites

Looping background videos add a layer of interactivity and engagement to websites by creating a dynamic atmosphere. For example, Airbnb might use a looping video of scenic destinations to evoke a sense of travel and adventure, setting the tone for potential bookings. Similarly, a fitness brand could loop action-packed clips of workouts or training sessions to inspire visitors as they browse fitness plans.

2. Promotional content

Brands use looping videos to showcase products in a visually captivating and repeatable way. For instance, Nike might feature a loop of athletes running in new footwear on its homepage to continuously highlight the product's appeal. A luxury car brand like Tesla could loop a video showing sleek exterior shots and innovative features of its latest model to keep viewers engaged while exploring the site.

3. Educational videos

In educational platforms, looping videos can help reinforce key lessons or concepts through repetition. For example, Duolingo might loop short videos of native speakers pronouncing common phrases to help users practice and retain vocabulary. On a cooking platform like MasterClass, videos showing repeated steps of a recipe technique, such as kneading dough, could be looped to help learners master the process.

4. Event highlights

Looping videos are great for showcasing event highlights, building anticipation, and maintaining engagement. For instance, Coachella might loop highlights of its most memorable performances from past festivals to excite users about future events. Similarly, a tech conference like CES could loop keynote highlights or product launches to attract potential attendees to register.

5. Art installations

In art installations, looping videos provide an immersive and continuous experience. For example, the Tate Modern might feature a looping video of an artist creating a mural, providing a behind-the-scenes look at their creative process. Another example is teamLab’s digital exhibitions, where looping visual effects and interactive elements blend together to create an ongoing artistic experience for visitors.

Wrapping it up…

Looping video playback is a simple yet effective way to enhance user engagement on your website. By using the <video> tag with the loop attribute, you can ensure that your videos play continuously without requiring user intervention. Whether for background visuals or promotional content, this feature can significantly improve user experience. At FastPix, we provide comprehensive streaming solutions that support seamless video playback, including the use of the loop attribute, enabling you to deliver high-quality, engaging content effortlessly.

FAQ

Can you control the number of times a media file loop?

No, the loop attribute creates an infinite loop. To control the number of loops, you would need to use JavaScript.


Does the loop attribute work with animated images?

No, it is specific to <audio> and <video> elements.


How do you stop a looping media element?

To stop a looping media element, remove the loop attribute or use JavaScript to set the loop property to false.


Does the loop attribute require a closing tag?

No, as a boolean attribute, it does not require a closing tag or value.

Get started

Enjoyed reading? You might also like

Try FastPix today!

FastPix grows with you – from startups to growth stage and beyond.