HTML5 Video Seamless Looping

Question

I know this question has been asked a number of times, and I've looked through every single one of them here on StackOverflow.

I'm simply trying to loop a 5 second MP4 video in an HTML5 player and have it be seamless. I've tried both jwplayer and video.js, both locally and on webspace, and neither do the trick. I've tried using the "ended" events; I've tried preloading/prebuffering; I've tried listening for the final second of a video and then seeking to the beginning to bypass the stop/play events entirely. I still always see jitter, and I still always see the loading icon (latest Chrome & Firefox).

For reference, here's some of my latest code for video.js:

<video id="loop_me" class="video-js vjs-default-skin vjs-big-play-centered"
  width="640" height="480"
  data-setup='{"controls": false, "autoplay": true, "loop": true, "preload": "auto"}'>
  <source src="video/loop_me.mp4" type="video/mp4" />
</video>

<script type="text/javascript">
  var myPlayer = videojs("loop_me");
  videojs("loop_me").ready(function(){
    this.on("timeupdate", function(){
      var whereYouAt = myPlayer.currentTime();
      if (whereYouAt > 4) {
        myPlayer.currentTime(1);
      }
    });
  });
</script>

Has anyone managed to do this successfully? And, if so, could you please post a complete solution? I don't normally ask for or want those, but I think it might be necessary this time.

Answer 1

Try this:
1) edit your video this way:
[1s][2s][3s][4s][5s]
cut 1st second block of the video and append it 2x to the end like this:
[2s][3s][4s][5s][1s][1s]

2) Use code:

<video id="vid"  width="100" height="50" loop autoplay preload="true">
    <source src="something.mp4" type="video/mp4">
</video>

<!-- Goes to end of body of course -->
<script>
    var vid = document.getElementById("vid");
    vid.addEventListener("timeupdate", function () {
        if(this.currentTime >= 5.0) {
            this.currentTime = 0.0;
        }
    });
</script>

The idea behind this is to make the video seamless (the end of the video is the beginning of the video). Also, you have to make sure the video never ends. The loop attribute works with smaller video files but you see a black image at the end of the video if too large (before the next looping iteration). Essentially before the video ends, you are seeking back to 0.0s.

I hope that helps.

Answer 2

Heureka!

We've found the actual, real, work-around-free solution to this problem over at where I work. It explains the inconsistent behavior through multiple developers as well.

The tl;dr version is: Bitrates. Who would've guessed? What I suppose is that many people use standard values for this that usually are around 10 Mbit/s for HD videos if you use the Adobe Media Encoder. This is not sufficient. The correct value would be 18 Mbit/s or maybe even higher. 16 is still a bit janky. I cannot express how well this works. I've, by now, tried the messiest workarounds for about five hours until I found this together with our video editor.

I hope this helps everyone and saves you tons of time!

Answer 3

1. Doozerman and Offbeatmammal are correct: no Javascript is required to loop video in HTML5.

2. About that pause before each iteration: in some browsers we, too, can observe a pause at the end of the loop in our tests. E.g., in the inline, 22-second demo video at... http://www.externaldesign.com/Marlin-Ouverson.html

...under OS X, we see a ~0.5 sec. pause before the loop repeats -- only in Firefox and Safari; Chrome and Opera both play the loop without noticeable pause. But note: for desktop/laptop browsers, the above page provides an added full-screen background video that appears to loop without pause in all four of the above browsers.

Answer 4

You don't need any extra scripts for that kind of stuff.

The "video" tag has built in loop attribute, use this and your video will loop.

<video id="loop_me" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="480" controls autoplay loop>
  <source src="video/loop_me.mp4" type="video/mp4" />
</video>

You can also add preload attribute if you wanted to. If you want, you can find more information about the video tag here: HTML video Tag

Edit: Oops. Didn't notice Offbeatmammals comment under your question. :)