Use "slide videos", with cut at precise frames

[tobiasBora]

First, thanks for this great tool.

I wanted to use some advanced animations built using some external softwares (like Blender or Manim) and use them inside a presentation. Blender/Manim will give me a video, and then I'll need to pause this video at appropriate frames. Of course, I could code myself something in javascript to do that using VideoFrame.js (eg) , but I was wondering if it would be possible to integrate it somehow inside impress.js, so that I can use both "videos slides" and normal slides.

Ideally, the user would create a new frame where they could put the video, and somehow provide a list of frame stops to stop at. Then, pressing "next" would simply play the video until the next frame stop, and so on.

Do you think it's doable?

PS: if it could also be exported properly as PDF... It would be just awesome.

[henrikingo]

Hi Tobias, and thanks for your suggestion.

What we do have in impress.js is the media plugin it allows you to autoplay a video when you enter a slide, and if you read the documentation to the end, there's also instructions how to move to the next slide when the video is finished.

What you are asking is kind of the inverse of that: You want to stay on the same slide but control how the video stops and resumes. To me this feels like video player functionality, and doesn't naturally fit in impress.js. (You could of course develop such a plugin, but it would definitely be an extras/ plugin - at least that's my opinion.) So what you would do "the impress way" would be to break your video into shorter clips, and each of them would be on different slides and autoplay when you move to the next slide.

[henrikingo]

Exporting to PDF is a request that returns every now and then. Maybe for some presentations it could be possible, otoh your own question also reveals the limitations: How would you play the video in PDF?

[tobiasBora]

Thanks for your answer. Concerning the autoplay, I used to do that in impress.js, but the transition between slides was sometimes erratic, sometimes the video was simply not playing while the sound were (this might be a bug of the browser), but also there are often some visible glitches when changing the video (like during one frame or two you get a black baground). I also experienced that with Reveal.js, hence I want a solution that keeps a single video element, but with different slide numbers. Also the auto play does not nicely play with "double next should go to the end of the video", or "previous should not play the video". Similarly there is no way to quickly change frames by directly jumping to the last frame of the sequence.

Concerning pdf export, the idea would be to only print the last frame, forgetting about the animation. Another option would be to specify a list of frames to include in the pdf.

[henrikingo]

Ok sure, I can imagine that using slides and autoplay isn't necessarily smooth. Even so, I think what you're describing is a video player. If you developed one, you should be able to just embed the video and the player on a single slide. But I'm not sure that it needs to integrate with impress.js in any way? (Apart from the PDF idea, which makes sense in some ways, but feels like a very specific feature.)

[tobiasBora]

Well, if I want slides to be numbered correctly embedding the "video player" is not sufficient. As far as I know, the only software that is general enough for my needs is eagle.js, but it does not come with pdf export nor overview. I guess I'll need to develop my own program.

[henrikingo]

Oh, I didn't understand before that you still wanted there to be several impress.js slides.

It seems to me what you are describing could be done with events. You could think of this as an impress.js plugin, maybe even an extension to the media plugin, or you could think of it as a video component that integrates with impress.js via events. sketch:

You embed a video player somewhere, for example on the first slide, and build your presentation so that the video player is always visible. (Or not, then you just get audio...) You could now use a combination of impress.js and video events to achieve what you want:

• Listen to impress:stepenter event to know when you entered a new slide. Here you call videoElement.play().
• I don't know the JS for how you make the video stop at a given frame, but it sounds like you already know this.
• When the video stops, I presume it emits events like end or paused. At this point you call impress().next() or goto().
• The remaining question is, where would you store the parameters for which frames play on each slide. I'm starting to see your point that this could indeed be additional data-media-* attributes on each step that maps to certain frames. The opposite way of doing it would be some kind of mapping stored together with the video element.