CODEWITHSUNDEEP
htmlvideohtml5-videovideo.js
PSDoff
PSDoff

Reputation: 158

VideoJS - Seamless Looping Video

New here and have a question for anyone experienced with HTML5 video and/or the VideoJS player (I'm also open to using a different player if necessary).

I've got a single video which includes an intro portion and a portion which I'd like to loop. I've done this in order to prevent having a "black blip" when loading the second part of it.

So my question is this, I'd like to have this second part seamlessly loop and can't seem to pull it off quite right. There seems to be a second or so as a delay before it begins playing again. I had my video editor set the looping point at exactly 36 seconds and am using the following code to seek to 36 seconds in and play after reaching the end.

myPlayer.addEvent("ended", function () {
  myPlayer.currentTime(36);
  myPlayer.play();
});

This winds up swinging the video back to the first frame, then skipping to 36 seconds in, and then playing. I'm going to attempt setting a listener for the end second of the video and perform the seek, but I'm still concerned about the momentary delay after seeking.

Any help would be greatly appreciated!

Alex

UPDATE: I've managed to eliminate the bit where it goes back to first frame by editing the source of video.js to remove the default functions run when the "ended" event gets triggered (which basically went like this: "pause(); currentTime(0); pause();" )

The video will now go directly to the 36 second mark that I need it to, but the problem is that it still registers the video as ended and stops it before playing it again at the 36 second mark, creating a slight delay in the loop. I'm trying to figure out how I can get it to listen for, maybe, the second that the video is about to end and trigger the seek (currentTime) function then as opposed to the "ended" event listener.

Upvotes: 4

Views: 5216

Answers (1)

brianchirls
brianchirls

Reputation: 7853

Try breaking the video up into two sections: the intro and the looping part. Make a <video> element for each one and position them in the same place, with the second video hidden. Set an "ended" event on the intro to swap out the display and start the second video. Then, you can set the loop attribute on the second video element.

You shouldn't have a problem getting the two videos to play seamlessly together as long as you have the preload attribute on at least the looping video.

If that doesn't work, try making two video elements with the same looping video. While one is playing, you can hide the other and set its currentTime back to zero, so any seeking delay will happen when nobody is looking. (Hopefully, the browser will be smart enough to cache the video file and only load it from the network once, but you may want to experiment.)

(Unfortunately, none of this will work on an ipad, because mobile safari doesn't support multiple media elements on one web page.)

Upvotes: 1

Related Questions