Play infinitely looping video on-load in HTML5

Gearing up for perfect loop

Get the video rolling as soon as the page loads, because our audience is impatient!

document.addEventListener('DOMContentLoaded', (event) => {
  // Let's roll the video!
  document.querySelector('video').play();
});


Tackle those pesky autoplay restrictions with a nifty trick: mute the videos or involve user interactions:

<video autoplay loop muted id="background-video">
  <source src="path-to-video.mp4" type="video/mp4">
  <!-- "Shhh, I am auto-playing" -->
</video>


For those Apple fans out there, don't forget to include the playsinline attribute. This prevents the video going full-screen and crashing your cool design illusion:

<video autoplay loop muted playsinline>
  <source src="video.mp4" type="video/mp4">
</video>


Embracing browser differences

Ensure your videos play nice with all browsers. Offer multiple formats in <source> tags:

<video autoplay loop muted>
  <!-- Secret handshake with a web browser -->
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>


For the yesteryears' browsers (we still love them), show a friendly fallback text:

<video autoplay loop muted>
  <source src="video.mp4" type="video/mp4">
  <!-- "Browser, do you even video?" -->
  Your browser does not support the video tag.
</video>


Have a heart for those veteran browsers by using a polyfill:

<script src="video-polyfill.js"></script>


To tackle those pesky browsers that demand users to interact before they autoplay the videos, our secret weapon? Events:

let videoElement = document.getElementById('background-video');
videoElement.addEventListener('ended', () => {
  this.currentTime = 0;
  this.play();
}, false);

// Casting a magic spell using the touchstart event
document.body.addEventListener('touchstart', function(e) {
  // "C'mon, video, let's play!"
  videoElement.play();
}, false);


Pro-level enhancements

Native autoplay is great, but looping can sometimes act like a stubborn mule. This is where JavaScript rides to the rescues:

videoElement.onended = function() {
  this.currentTime = 0; // Let the time wizard move us back
  this.play();          // "Video, you shall loop!"
};


Remember, for a zero-distraction viewing experience, get rid of those pesky video controls:

<video autoplay loop muted controls="false">
  <source src="video.mp4" type="video/mp4">
</video>


Boost accessibility by adding subtitles or captions:

<video autoplay loop muted>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <!-- "Now, everyone can enjoy this video" -->
</video>


Dancing with browser quirks

Different devices or browsers impose their own little quirks on autoplay and looping.

For Apple users:

• Autoplay might feel shy and require user interaction.
• Loop might stumble a little.

To keep things smooth:

• Use inline attribute: The playsinline attribute avoids fullscreen video disruption.
• Depend on JavaScript: Event listeners and scripting logic can save the day.

Chrome users, take note:

• Chrome might block autoplay unless the video is muted.
• Chrome takes a peek into user engagement with your site before giving the green signal to autoplay.

To stay in Chrome's good books:

• Keep video muted.
• Engage users with your site to up the autoplay permission.

Other browsers have their quirks:

• Some browsers may restrict executing JavaScript with autoplay.
• Autoplay policy changes like a chameleon. So, be in the know.

Tackling these quirks:

• Use progressive enhancement: serve up basic functionalities first and enhance based on browser capabilities.
• Use resources like Can I use... to stay updated with compatibility changes.

Handling complex scenarios with JavaScript

For those turbulent scenarios where native HTML attributes cannot serve alone, JavaScript's setTimeout and event listeners come to the aid:

Handle network latency with monitored timeupdate events and anticipate the loop point.

To deal with varying browser interpretations of loop behavior, custom scripting provides a more consistent loop control.

For the edge cases that demand super seamless and precise video looping, combining ended event listeners and currentTime control results in a flawless looping experience that would make any video proud.