Use a video for animation

[tobiasBora]

Is your feature request related to a problem? Please describe.

I plan to create video animations using Blender or Manim in order to better explain some concepts that are hard to grasp with still images. For this reason, I'd love to be able to play a video and stop it at some frames, but I want it to be well integrated into the slide show. I created a standalone demo here, but I've no idea how to integrate it into slidev (I nearly finished to port it as a plugin for RevealJs)

Describe the solution you'd like

First, I'd love a first basic component, maybe useable like:

<VideoFrame start="10" stop="30" screenCover>
      <video> 
          <source src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
      </video>
</VideoFrame>

This component should start to play video inside from frame 10 (here) when the slide appears, and should stops to play when it arrives on frame 30 (here). If no start/stop frames are given, it should play from start/until the end, and if start=stop, it should be considered as a simple stand image, taken from the corresponding frame. Moreover, pressing the next key while playing should stop the video and go the stop frame directly. If I arrive on this component via a goto or by moving slides backward, I'd like to display only the stop frame. In print mode (PDF export) and overview mode, this stop frame should also be the one printed. If screenCover is enabled, then the video style is chosen to fit the whole screen (cover mode). We could also design similar styles for fit mode.

Then, I'd love to be able to generate multiple frames easily. For instance:

<VideoFrameBatch frames="0,10,30,50,*" screenCover>
      <video> 
          <source src="http://www.w3schools.com/html/mov_bbb.mp4"></source>
      </video>
</VideoFrameBatch>

should start the video at frame 0, play until 10, stop, then on "next" should play until frame 30... (* mean "end"). Note that each "next" press should obtain a different slide number.

Describe alternatives you've considered I could include videos directly and click "play", but it's not what I have in mind as I want it to be really integrated into the presentation.

Upgrade API?

Note that VideoFrameBatch would not work really reliably if they are not sharing the same video. Indeed, while making the plugin for RevealJs I observe some glitchs from time to time when the video editor is changed.

I know nothing about the internal of slidevjs (and can't find much documentation on the API beyond the very basics). But I guess the above (and much more) would be easier to do if the API would allow the full delegation of a part of the show to a component. For instance, a component may only declare to slidevjs that it will display x slides, each of them having y clicks (to update accordingly the slide number). Then, slidevjs could just say "you are in charge of the controls now, you received a next event..." until the component sends an event to say to slidevjs saying that it is done with the controls and that slidevjs can proceed with the next component. I'm not sure if this is clear ^^'

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[tobiasBora]

Still interested

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[tobiasBora]

Still interested

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[tobiasBora]

Still interested