Show HN: I made a React library for creating interactive videos | Hacker News Reader

Show HN: I made a React library for creating interactive videos

ractive-player.org

4 pointsysulyma5 comments

This is a library I developed to make videos for my math site "La mer qui monte" (https://lmqm.xyz), and have now cleaned up for general use. Rather than recording a traditional video and then adding HTML overlays to achieve "interactivity", you create the video content in HTML/React and record yourself talking over it. This makes it a lot easier to work on content incrementally (and separately from recording), and also lets you do cool things like the interactive coding demos.

There's a second tutorial focused specifically on math content: https://ractive-player.org/math/

This looks super interesting. Could you please list a couple of use cases?

Sure! This library is best suited to "vector" content: text/graphics/animation, rather than a video of real life (although you could include a traditional video in a ractive if you wanted). I just left a comment at the top that explains my own use case and links to a bunch of examples of using it to teach math/programming.

Some other examples I can think of: If you were making an informational video, you could put D3.js into the video so your viewers could interact/experiment with the data. More creatively, you could make a video where viewers make choices that affect what happens next. Or you could make it so that when they rewind the video, it plays something slightly different than what it did originally, simulating a narrator's unreliable memories. (I haven't tried either of these, but I think they should be possible)

Ok maybe totally out of scope but is it theoretically possible to render a html page in the video? If so, can I use this to create a saas product demo programmatically? Love the examples. this is a great piece of work.

I'm not entirely sure what you mean—if you copy the HTML and CSS from the page into your video's source code, then yes. If you put the page in an iframe inside the video, that will also work, but you won't be able to interact with the page much.

Reply on news.ycombinator.com