search

sinedied / backslide

:sweat_drops: CLI tool for making HTML presentations with Remark.js using Markdown
https://sinedied.github.io/backslide
MIT License
764 stars 50 forks source link

inline video #25

Open jronallo opened 6 years ago

jronallo commented 6 years ago

https://github.com/remy/inliner now supports optional inlining of video. It would be nice to expose a similar option for backslide to inline video as well.

jronallo commented 6 years ago

I see now that the bigger issue that nothing referenced from the Markdown is inlined. So an image referred to like this would not get inlined:

# Title

Content....

![](http://example/SCRC/image.png)

More content....

This means that the slideshow cannot be completely self-contained.

I think this is a general limitation and bigger issue with inliner + remarkjs, so I'm closing this issue.

sinedied commented 6 years ago

@jronallo Yes, that's why custom JS scripts were added to inline images from markdown, while inliner takes care of the scripts and css.

While technically feasible, I'm not sure about inlining videos: from my tests, when the self-contained HTML file grows bigger, it tends to become much slower, and with 15MB+ HTML files it starts to lag terribly during presentations. With (often much larger) videos, I'm not sure how it would behave...

jronallo commented 6 years ago

@sinedied Since I closed the issue I dug into the code more and found the regular expressions. I hadn't realized how the inlining was really two separate processes and that only local files would be inlined.

I've been embedding small videos in slide decks for years now and it has worked really well for me. Mostly they're short videos more like GIFs or small pew pew audio. Media does need to be compressed to not make the HTML too large. My only concern in this case is with the remark.js processing of the Markdown. Do you think the lag you've seen is due to remarkjs or maybe just the hardware and browser you're presenting in?

I thought I'd give adding the feature a try though and I've got something working by adding a couple more regular expressions to the image inlining code. The video and audio regular expressions are very naive, but they work for me. I added another CLI option for including media (video and audio) while poster image inlining is done by default.

Here's the commit: https://github.com/jronallo/backslide/commit/b0f4b5a824a4ffcc83afe8cf1068aeb54016fe70

Would you accept a pull request something like this? Anything you'd like done differently?

I've also considered what might be done in the case where there is media in the Markdown, but the media option is not set. Maybe those files could get "exported" into a folder within dist to make it clear what all is needed to allow the presentation to work in a semi-self-contained way?

jronallo commented 6 years ago

Here's an example self-contained slide deck with a video using the code from this pull request.

https://ronallo.com/presentations/sunsetting-cni/#56

sinedied commented 6 years ago

Sorry I missed your previous comment! Sure I would accept a PR with these changes, I would just prefer a more explicit flag name, like --video instead of --media 😉

jronallo commented 6 years ago

I used --media as this includes inlining <audio> elements as well. Would you prefer different options for each AV type? So --video and --audio as separate options? Or maybe a name like --av?

sinedied commented 6 years ago

I think a single flag is enough for both audio/video inlining, let's keep it simple :)