125

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?

stefmikhail
  • 6,877
  • 13
  • 47
  • 61

4 Answers4

214

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

Lee Goddard
  • 10,680
  • 4
  • 46
  • 63
longi
  • 11,104
  • 10
  • 55
  • 89
  • 2
    Indeed good advice sir. I ended up using `javascript` to listen for the `videoEnd` event, and looping back to the beginning as from what I can tell, the `loop` attribute is not supported by all browsers. For iOS devices, they don't support `autoplay` in any way shape or form by iOS 5, so I just used a fallback image for mobile. Thanks again. – stefmikhail May 14 '12 at 23:25
  • 12
    using –  Nov 04 '13 at 18:13
  • @vaxquis thanks for update, you are welcome to edit api changes next time! – longi Nov 07 '13 at 13:42
  • 5
    No problem, mate, always happy to help. Still, I wouldn't mix XHTML-type attributes 'autoplay="autoplay"' with HTML-type 'loop' - I'd go with with either –  Nov 08 '13 at 05:44
  • 3
    Generally, `autoplay` only works in Safari if you also use `muted`: https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/ – andreyrd Apr 18 '18 at 17:57
  • This is not part of the question but someone asked me how to easyly make it responsive so I did this with a 800px video width: `
    `     – WhGandalf Oct 30 '19 at 19:12
  • Related [autoplay muted looping video](https://stackoverflow.com/a/59377946/1717535) – Fabien Snauwaert Dec 17 '19 at 16:08
  • I would suggest to style it like [this example](https://jsfiddle.net/UtmostCreator/gktp28wc/) – Utmost Creator Jan 28 '21 at 21:23
62

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>
mic
  • 4,300
  • 1
  • 19
  • 25
23

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>
Raluca Albu
  • 332
  • 2
  • 7
5

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();

});
asmmahmud
  • 4,844
  • 2
  • 40
  • 47