Play infinitely looping video on-load in HTML5

Question

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

User · Answer

As of April 2018  Chrome  along with several other major browsers  now require the muted attribute too   Therefore  you should use   lt video width  320  height  240  autoplay loop muted gt     lt source src  movie mp4  type  video mp4    gt   lt  video gt

User · Answer

For iPhone it works if you add also playsinline so    lt video width  320  height  240  autoplay loop muted playsinline gt     lt source src  movie mp4  type  video mp4    gt   lt  video gt

User · Answer

The loop attribute should do it    lt video width  320  height  240  autoplay loop gt     lt source src  movie mp4  type  video mp4    gt     lt source src  movie ogg  type  video ogg    gt    Your browser does not support the video tag   lt  video gt    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

User · Answer

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

[html] Play infinitely looping video on-load in HTML5

Examples related to html

Examples related to video

Examples related to video-streaming

Examples related to html5-video