Play full HTML5 video and then loop a section of it

Question

I'm trying to play an 8.6 second video once completely, and then loop a small section of the video infinitely, to keep the illusion of a never-ending video. So far I've looked into the media fragments URI, and the ended event of the video. Setting the currentTime attribute in the ended event listener works, but it makes the video "blink".

At present, I'm using a timeupdate event listener to change the time when the video is approaching the end [shown below]

elem.addEventListener('timeupdate', function () {
if (elem.currentTime >= 8.5) {
    elem.currentTime = 5;
    elem.play();
}
}, false);

JSFiddle here

This works as well, but the video pauses visibly before restarting at 5 seconds. Is there a smoother way of playing the video once and then looping a segment of it?

Solution 1

Your code is fine, the problem is with your MP4 file! Try using a much smaller video like this one ( http://www.w3schools.com/tags/movie.mp4 ) to confirm the issue is not with your code.

So how can you achieve the same result but with large videos files? You will need two video files:

• video1 is the main video
• video2 is the looping video

Remember: HTML5 video has no problem playing and looping large video files so we will use this method to play the videos.

In the example below we will play the first video and when it finishes we will execute a function to hide video1 and then show/play video2. (Video 2 is already set to loop)

Don't forget to load JQuery in your head otherwise this will not work.

<video id="video1" width="1080" height="568" poster="movie.png" autoplay onended="run()">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  <object data="movie.mp4" width="1080" height="568">
    <embed width="1080" height="568" src="movie.swf">
  </object>
Optional test to be displayed if the browser doesn't support the video tag (HTML 5)
</video>


<video id="video2" width="1080" height="568" poster="loop.png" loop>
  <source src="loop.webm" type="video/webm">
  <source src="loop.ogg" type="video/ogg">
  <source src="loop.mp4" type="video/mp4">
  <object data="loop.mp4" width="1080" height="568">
    <embed width="1080" height="568" src="loop.swf">
  </object>
Optional test to be displayed if the browser doesn't support the video tag (HTML 5)
</video>


<script> 
$( "#video2" ).hide();
function run(){
   $( "#video1" ).hide();
    $( "#video2" ).show();
    document.getElementById("video2").play();
   };
</script> 

Solution 2

I just had to deal with the same problem and noticed the same issues with flickering. Here was my solution:

• Get 2 videos (or sets of videos) - one for the non-looped section, the other for the looped section
• Create 2 video elements
• set the looping element to 'display:none'

Then just capture the ended event and swap display status (example uses jquery but you could use 'style.display="none/block"' just as easily:

VideoPlayer1 = document.getElementById('video1');
VideoPlayer2 = document.getElementById('video2');
VideoPlayer1.addEventListener('ended', videoLooper, false);

function videoLooper()
{
    VideoPlayer2.play();
    $(VideoPlayer2).show();
    $(VideoPlayer1).hide();
}

Solution 3

Try the following, to 'rewind' it as soon as it ends:

vidElem.addEventListener("ended", function () {
        vidElem.currentTime = 2.5;
        vidElem.play();
}, false);

Updated fiddle: http://jsfiddle.net/Lt4n7/1/

Solution 4

You can't solve this issue in javascript. That delay you see depends on the video compression and the hardware.

To start playing at a time that is not 0, the video decoder has to go back and find a key frame and then build the current frame by reading everything between the last key frame and your chosen time.

I'm not an expert in video compression, but maybe there is a way to pick these key frames and place them exactly where you need them. I don't think it will be easy and smooth, though.

---

If you're looking for an easier solution, use @Random's, but it uses two <video> tags to work around this limit.

View more solutions

Comments

[WeNeigh]

Thanks, but I already tried using the ended event listener. Perhaps that was the wrong sample video to use (It has its own pauses), but there's a clear pause before the video moves to 2.5 seconds. I'm looking to make the loop seamless.

[Max]

Try splitting it up into two videos

[WeNeigh]

You mean a full-length video and a video of the bit I want to loop? That seems wasteful! There's got to be an HTML5+JS way! :)

[Max]

just the video up to the part you want to loop. If you could create a fiddle with a loopable example, that'd also help a lot

[Bernesto]

Worked great for me. Wrapped it in a jQuery ready, and done. $(function(){ var vidElem = $("#bgvid>VIDEO")[0]; vidElem.addEventListener("ended", function () { vidElem.currentTime = 21; vidElem.play(); }, false); });

[fregante]

FYI this doesn't work well with some videos because sometimes the browser just can't change the currentTime and play instantly, so you'll have a delay between each loop. Using two videos is (sadly) more reliable.