Play infinitely looping video on-load in HTML5
Solution 1
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
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
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
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();
});
Related videos on Youtube
stefmikhail
Updated on March 24, 2022Comments
-
stefmikhail about 2 years
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
andFLVPlayback
, but I would prefer to steer clear ofFlash
in the HTML5 sphere. I'm thinking I could use javascript'ssetTimeout
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 wayFLVPlayback
would? -
stefmikhail about 12 yearsIndeed good advice sir. I ended up using
javascript
to listen for thevideoEnd
event, and looping back to the beginning as from what I can tell, theloop
attribute is not supported by all browsers. For iOS devices, they don't supportautoplay
in any way shape or form by iOS 5, so I just used a fallback image for mobile. Thanks again. -
Admin over 10 yearsusing <video loop="true"> is invalid w3.org/TR/html-markup/video.html - either use <video loop="loop"> or just <video loop> - this rule hold for almost ALL HTML5 tags (either just tagname, or tagname="tagname" for XHTML5)
-
longi over 10 years@vaxquis thanks for update, you are welcome to edit api changes next time!
-
Admin over 10 yearsNo 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 <video ... autoplay loop>, parsable as HTML5 or <video ... autoplay="autoplay" loop="loop">, parsable as either HTML5 or XHTML5. mixing styles makes a markup that's still invalid as XHTML but unnecessarily verbose for HTML.
-
andreyrd about 6 yearsGenerally,
autoplay
only works in Safari if you also usemuted
: webkit.org/blog/7734/auto-play-policy-changes-for-macos -
WhGandalf over 4 yearsThis 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:
<div style="max-width:800px: height:auto"> <video width="100%" height="100%" autoplay loop> <source src="http://mumu.com.co/wp-content/uploads/2018/01/formas-animadas.mp4" type="video/mp4" /> Your browser does not support the video tag. </video> </div>
-
Fabien Snauwaert over 4 yearsRelated autoplay muted looping video
-
pomber about 4 yearsProps for JSX:
autoPlay loop muted playsInline
-
Utmost Creator over 3 yearsI would suggest to style it like this example