Create multi-choice videos with buttons appearing after 5 seconds the start of the video: how to do it? Options

[calmabubbasst]

Create multi-choice videos with buttons appearing after 5 seconds the start of the video: how to do it?

Hi everyone, how are you guys?

I recently saw this https://www.gotolstoy.com/interactive-video

and i thought i could come up with something fun with that, but i don't want to become a slave to a platform or a vendor,
so I thought I could get the same effect with a page that contains the intro video10 and below appear the buttons with links to the pages that contain video20 , video 30, video .. and continue doing so by loading the new pages (with the same page style to hide the transition) and new videos to continue the story.

So what I need are
- how to make the link buttons appear under the video after 5 or 6 seconds after the start of the video?
- how can I pre-load the next videos into memory while I'm watching the previous video? (so as not to have a long wait after choosing the new video and not interrupt the story)[color=#FF0000]

Could you help me again this time?

[Christian J]

Hello! All this likely requires javascript. I haven't tried any of the below.

- how to make the link buttons appear under the video after 5 or 6 seconds after the start of the video?

You might check when the JS currentTime property has reached the 5 second mark: https://developer.mozilla.org/en-US/docs/We...ent/currentTime, or you might start an independent JS timer when the user clicks the Play button. In either case the video playback may become shorter or longer than exactly five seconds IRL --perhaps the user skips parts of the video, pauses the playback, or maybe there's a download delay.

- how can I pre-load the next videos into memory while I'm watching the previous video? (so as not to have a long wait after choosing the new video and not interrupt the story)[/b][color=#FF0000]

Are there many branching videos being preloaded at the same time? That could result in a high server load, make sure your webhost allows it...

If you use separate VIDEO elements for each video, maybe you could use the PRELOAD attributes for each upcoming VIDEO element (while it's made invisible by the timer with CSS): https://developer.mozilla.org/en-US/docs/We...L/Element/video or if you load each new video in a framed page, perhaps use https://developer.mozilla.org/en-US/docs/We...tes/rel/preload

It also seems possible to change a single VIDEO element's VideoTrackList, but then I don't know how preloading works: https://developer.mozilla.org/en-US/docs/We.../VideoTrackList