最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - HTML5 Video Seamless Looping - Stack Overflow

programmeradmin2浏览0评论

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.

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.

Share Improve this question edited Dec 24, 2013 at 15:40 emaxsaun 4,2012 gold badges15 silver badges13 bronze badges asked Dec 24, 2013 at 2:00 daveycroqetdaveycroqet 2,7277 gold badges38 silver badges61 bronze badges 4
  • 1 you are probably going to have to use the MediaSource capabilities of HTML5 to feed your video to the video element as a continual stream if you want to avoid the pause while resetting the playhead to the beginning - see updates.html5rocks.com/2011/11/… for example – Offbeatmammal Commented Dec 24, 2013 at 15:23
  • 1 d'oh .... sometimes the obvious worked wonders.... the loop property: <video id="video-loop" preload="auto" loop autoplay controls muted> – Offbeatmammal Commented Dec 25, 2013 at 20:41
  • 2 The accepted answer is not seamless jsfiddle.net/blowsie/QQTqn – Blowsie Commented Apr 4, 2014 at 9:02
  • 1 If you happen to be using a poster attribute in your real code, try removing that after the video starts playing. For me this fixed a flicker between loops in Chrome where the poster image would display for a fraction of a second. – Josh Harrison Commented Jun 26, 2014 at 16:45
Add a comment  | 

4 Answers 4

Reset to default 2

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.

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!

  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.

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. :)

发布评论

评论列表(0)

  1. 暂无评论