3 ms·

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

4 points by ysulyma 6y ago

42droids 6y ago
This looks super interesting. Could you please list a couple of use cases?
- ysulyma 6y ago
  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)
  - 42droids 6y ago
    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.
    - ysulyma 6y ago
      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.
ysulyma 6y ago
This is a library I developed to make videos for my math site "La mer qui monte" (https://lmqm.xyz 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/ https://ractive-player.org/math/

4 points by ysulyma 6y ago

42droids 6y ago

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

ysulyma 6y ago
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)
- 42droids 6y ago
  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.
  - ysulyma 6y ago
    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.

ysulyma 6y ago

This is a library I developed to make videos for my math site "La mer qui monte" (https://lmqm.xyz 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/ https://ractive-player.org/math/