Printable Version of Topic

Posted by: calmabubbasst Jul 2 2023, 06:39 AM

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?

Posted by: Christian J Jul 2 2023, 05:04 PM

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

You might check when the JS currentTime property has reached the 5 second mark: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/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.


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/Web/HTML/Element/video or if you load each new video in a framed page, perhaps use https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/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/Web/API/VideoTrackList

Posted by: pandy Jul 3 2023, 02:17 PM

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

Posted by: Christian J Jul 3 2023, 04:50 PM

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

Not sure about browser support (MS Edge?): https://en.wikipedia.org/wiki/Synchronized_Multimedia_Integration_Language#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/

Posted by: pandy Jul 3 2023, 05:19 PM

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/

Posted by: Christian J Jul 4 2023, 08:31 AM

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."