Automatic triggering of series of videos for looping

Hi – I’m trying to have a series of videos in the same scene that automatically trigger, one after the other, in a specified sequence, eventually looping back on itself so that the whole series plays indefinitely.

Here’s what I have and what I want:

  1. video1 – This clip’s instant playback is first triggered by an onClick action from a custom button, which starts the sequence. (Got this working.)

  2. video2 – This clip should instantly start playing as soon as video1 has ended, so that it’s as seamless as possible between the two clips. (Thought I had this working, but then not so much.)

  3. video3 – Just as the switch from video1 to video2, this clip should start playing instantly and as seamlessly as possible right after video2 has ended. Then, when video3 ends, it should instantly switch back to video1, completing the loop. I assume I’d use the same onClick function as in #1, just with a different action method? (Like #2, no success with this yet.)

I’m assuming this could all be done with some relatively simple JavaScript functions, but I just can’t wrap my head around it. I appreciate any programming insight. Thanks!

Use the “ended” listener with your video to start the next. Place these on scene load.

var video1 = hypeDocument.getElementById('video1');
var video2 = hypeDocument.getElementById('video2');
var video3 = hypeDocument.getElementById('video3')
video1.addEventListener('ended', function () {
    video2.play();
})
video2.addEventListener('ended', function () {
    video3.play();
})
video3.addEventListener('ended', function () {
    video1.play();
})

Note. Not being able to see your document I’m just assuming you’ve placed them in the scene and given them ID’s

1 Like