Playing videos sequentially with scripting

Hi @Stefan,

I’m wanting to play snippets of videos (or just short videos) one after another without loading icons appearing. I started with something like this:

v1.video.onLoaded(()=>{
    v1.video.play();
    Time.schedule(()=>{
        v1.video.stop();
        v1.opacity = 0;
        v2.opacity = 1;
        v2.video.onLoaded(()=>{
            v2.video.play();
            Time.schedule(()=>{
                v2.video.stop();
            },2);
        }); 
    },2);   
});

but this doesn’t play the 2nd video for some reason.

I tried implementing using a Promise, based on this Solution:

function play(item: VideoItem): Promise<BaseItem> {
    return new Promise((resolve,reject)=>{
        item.video.onLoaded(()=>{
            item.opacity = 1;
            item.video.play();
            Time.schedule(()=>{
                item.video.stop();
                item.opacity = 0;
                resolve(item);
            },2);
        })
    })
}

play(v1)
.then(play(v2))
.then(play(v3));

but that fails at the first then() with the error:

Argument of type 'Promise<BaseItem>' is not assignable to parameter of type '(value: BaseItem) => BaseItem | PromiseLike<BaseItem>'.
Type 'Promise<BaseItem>' provides no match for the signature '(value: BaseItem): BaseItem | PromiseLike<BaseItem>'.(2345)

Any ideas of how to better implement this? I’ve got it working fine in CoBlocks, but there’s some lag between videos so trying to get it faster in JS/TS. See CoSpaces Edu :: Video editing test

Many thanks,
Geoff

Hi @techleapnz,

Since all videos are streamed it’s difficult to skip the loading icon easily. Every time you play a video or adjust its current playback position it will cause the VideoItem to buffer again. One way to solve the buffering is to load all videos in the background and dynamically show/hide them.

The approach you’ve tried above is getting very close to a solution, though it doesn’t cover the preloading of videos. I’ve made a remixable example based on your space which you can check out below :slight_smile:

The second scene offers a solution that preloads all videos in the scene. Please note that this approach would play several videos at once in the background, which could be leading to performance issues on low-end devices.

Hope this helps!

Thanks for these in-depth solutions, @Stefan! Two questions:

  1. Given that the videos are streamed, could you please clarify how the onLoaded() function operates: does it fire once the first streaming segment has loaded and is ready for playback, or once the entire video has loaded? (I’m guessing it’s the former)

  2. What’s the size of the video segments streamed?

I found that I could skip the loading icon if I played then immediately paused the video stream on CoBlocks, and this method also works in scripting but still has the issue of momentary black screen in between videos.

Will keep digging.

Many thanks!
Geoff