Play infinitely looping video on-load in HTML5

HtmlVideoVideo StreamingHtml5 Video

Html Problem Overview


I'm looking to place a video in an HTML5 page that will begin playing on page-load, and once completed, loop back to the beginning without a break. The video should also NOT have any controls associated with it, and either be compatible with all 'modern' browsers, or have the option of a polyfill.

Previously I would have done this via Flash and FLVPlayback, but I would prefer to steer clear of Flash in the HTML5 sphere. I'm thinking I could use javascript's setTimeout to create a smooth loop, but what should I use to embed the video itself? Is there something out there that will stream the video the way FLVPlayback would?

Html Solutions


Solution 1 - Html

The loop attribute should do it:

<video width="320" height="240" autoplay loop muted>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

The addition of the unintuitive muted attribute is required by Chrome as documented on their dev site.

Should you have a problem with the loop attribute (as we had in the past), listen to the videoEnd event and call the play() method when it fires.

Note1: I'm not sure about the behavior on Apple's iPad/iPhone, because they have some restrictions against autoplay.

Note2: loop="true" and autoplay="autoplay" are deprecated

Solution 2 - Html

As of April 2018, Chrome (along with several other major browsers) now require the muted attribute too.

Therefore, you should use

<video width="320" height="240" autoplay loop muted>
  <source src="movie.mp4" type="video/mp4" />
</video>

Solution 3 - Html

For iPhone it works if you add also playsinline so:

<video width="320" height="240" autoplay loop muted playsinline>
  <source src="movie.mp4" type="video/mp4" />
</video>

Solution 4 - Html

You can do this the following two ways:

  1. Using loop attribute in video element (mentioned in the first answer):

  2. and you can use the ended media event:

    window.addEventListener('load', function(){ var newVideo = document.getElementById('videoElementId'); newVideo.addEventListener('ended', function() { this.currentTime = 0; this.play(); }, false);

     newVideo.play();
    

    });

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionstefmikhailView Question on Stackoverflow
Solution 1 - HtmllongiView Answer on Stackoverflow
Solution 2 - HtmlmicView Answer on Stackoverflow
Solution 3 - HtmlRaluca AlbuView Answer on Stackoverflow
Solution 4 - HtmlasmmahmudView Answer on Stackoverflow