Play infinitely looping video on-load in HTML5
HtmlVideoVideo StreamingHtml5 VideoHtml 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:
-
Using
loop
attribute in video element (mentioned in the first answer): -
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();
});