Is it possible to create an interactive video?

[BenjaminIsMyName]

Hey,
I was wondering if it's possible to create a video that has no specific duration.
Instead, the video is changing "on the fly" based on the user's input (clicking buttons or writing something in an input INSIDE the "video") and based on API response.

For example, in the video I want to create an input tag for the user to write something, and then I want to send that data to an API and read the response using TTS. If the API call failed, I want to render something else in the video.

Is this possible in Remotion?
Can I create a video with no specific duration?
Can I "pause" the video until the user enters something in the input tag?
Can the video modify itself based on the user's input?

[BenjaminIsMyName]

Well, I just built it!

Took me a few hours but I understood how to wait for user input, and only then move to the next sequence.
Here is the repo: https://github.com/BenjaminIsMyName/interactive-video

And here is a screen recording:

Screen.Recording.2024-02-01.at.23.22.06.mov

[JonnyBurger]

Nice, you did it! 🙂
Yes, the trick is to pass a state update callback function to the input props. Based on an update, you can even set a new duration, or play/pause the video.

[BenjaminIsMyName]

Yup! It works. I can build an interactive video with Remotion!
The question is - should I? Is Remotion the right tool for the job?
To my understanding, Remotion was built to create a real MP4 video, with a specific duration.
Do you think Remotion is the tool for interactive "videos"?

Because I don't want to create a real video, I just want to put a "player" in my React.js app with animations & voiceover, and react to user's input.
The current way of waiting for a user's input in Remotion feels like a workaround.

[JonnyBurger]

@BenjaminIsMyName If it works for you, then I would say great! There is also https://liqvidjs.org/ which is more targeted towards explicitly doing interactive videos.