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

[pandy]

Isn't that what SMIL is for? And no, I don't know SMIL.

[Christian J]

I remember that acronym from long ago (but nothing else).

Not sure about browser support (MS Edge?): https://en.wikipedia.org/wiki/Synchronized_...ge#SMIL_players and I didn't get many search results for "W3C SMIL", but here's the spec anyway: https://www.w3.org/TR/SMIL3/

[pandy]

According to wikipedia it hasn't been updated in quite a while but is commonly used. Or that was my impression anyway.

They seem to be right about the lack of recent updates anyway. But maybe it was perfected already 2008.
https://www.w3.org/AudioVideo/

[Christian J]

is commonly used. Or that was my impression anyway.

Not so much on web pages maybe:

"SMIL is used in various applications, such as multimedia messaging on mobile phones, digital signage, and advanced content in the discontinued HD DVD format. Numerous authoring and rendering tools are available for creating SMIL content. SMIL can also be combined with other XML-based standards like SVG, RSS, VoiceXML, MusicXML, and TEI. While most web browsers natively support SMIL, Microsoft browsers do not, and the future of SMIL support in Google Chrome is uncertain. Playback of SMIL content can be achieved through various software and hardware media players."