Menu
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?
277
The loop attribute is a boolean attribute. When present, it specifies that the video will start over again, every time it is finished. The loop attribute should do it. If you have a problem with the loop attribute, listen to the videoEnd event.
The autoplay attribute is a boolean attribute. When present, the video will automatically start playing. Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
The loop attribute should do it:
<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> 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
78
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
