Play endlessly looped video on load in HTML5

Question

I want to place a video on an HTML5 page that starts playing when the page loads, and as soon as you're done, go back to the beginning without interruption. The video should also NOT have any controls associated with it, and either be compatible with all "modern" browsers, or have the ability to polyfill.

I used to do this through Flash and FLVPlayback , but I would prefer to avoid Flash in the HTML5 realm. I think I could use javascript setTimeout to create a smooth loop, but what should I use for the embedded video of myself? Is there anything out there that will broadcast the video in the FLVPlayback way?

Answer 1

The loop attribute should do this:

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

If you have a problem with the loop attribute (as in the past), listen for the videoEnd event and call the play() method when it starts.

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

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

Answer 2

You can do this in two ways:

1) Using the loop attribute in the 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(); });