Play Infinitely Looping Video On-Load in HTML5

Play infinitely looping video on-load in HTML5

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

How to stop looping an HTML5 video loop and let it play out to the end

You can remove the loop attribute, like this:

<video poster="images/banner-bg.jpg" id="bgvid" playsinline autoplay muted>
    <source src="vid/MM_Logo_Identity.mp4" type="video/mp4" id="bgvid1">
</video>

HTML5 video will not loop

Ah, I just stumbled into this exact problem.

As it turns out, looping (or any sort of seeking, for that matter) in <video> elements on Chrome only works if the video file was served up by a server that understands partial content requests. i.e. the server needs to honor requests that contain a "Range" header with a 206 "Partial Content" response. This is even the case if the video is small enough to be fully buffered by chrome, and no more server-round trips are made: if your server didn't honor chrome's Range request the first time, the video will not be loopable or seekable.

So yes, an issue with GridFS, although arguably Chrome should be more forgiving.

How to prevent delay when looping html5 mp4 video in Safari?

I would love to help, but we need to see your code. We can't really help much, because we don't know what you have.

Here is a theory to get you started:

Only .MP4 is supported in Safari - so make sure your video is actually .MP4 formatted. If it isn't it's a possiblity that it is playing, but the delay is because it's not supported. This is only so if you didn't convert it correctly.

Or another theory could be that the delay is because in Safari, looping the video virtually, just starts it over, so it will "Buffer" or "Re-Load" to replay.

Conclusive evidence (from some quick google referencing) shows, that the second theory is more torward what I am seeing. Chrome may have some special code inside the engine that renders differently from safari. Regardless. Try the code in the answer of a Similiar question.

Update

OP added code, still going to stick beside my answer as what I researched seemed to have came back to that conclusion.

---

Related Topics