3 ms·

If the target is a GitHub readme, then you can embed a video directly. eg https://github.com/paulirish/git-recent#readme https://github.com/paulirish/git-recent

If the target is a GitHub readme, then you can embed a video directly. eg https://github.com/paulirish/git-recent#readme https://github.com/paulirish/git-recent#readme That said, OP's SVG trick may be a smarter choice if the content is a terminal capture.

c-hendricks 1y ago
If you're going this route of adding a straight up video (which isn't bad!) it helps to edit the readme directly on GitHub. That way they're uploaded to githubusercontent (or whatever the domain is) and not taking up space in your repository.
- hbn 1y ago
  Were people doing that other option? The idea of committing a video to your repository for a PR seems silly. Every PR adds a new video to the codebase? Do you make a PR to prune them every once in a while?
  - aziaziazi 1y ago
    > Every PR adds a new video to the codebase Git commits only differences with the precedent commit, not the entire repository. Therefore the video is only committed once as long as that video doesn’t change.
pamelafox 1y ago
The nice thing about videos is the play/pause/slider UI. Some platforms do add play/pause explicitly to GIFs, using some JS, but as far as I know (and you would know more), that's not built into browsers yet. That's been one of the reasons I often end up using videos instead. When I've personally animated SVGs for use in RevealJS presentations, I tend to use CSS animations that I could control with JS if I wanted.
- kzrdude 1y ago
  If this gets widespread use, browsers will catch up and in 5-10 years we will have pause buttons! ;)
  - justsomehnguy 1y ago
    Meanwhile we are still have a stupid overlay controls because 20 years ago it was an iframe for an ActiveX control.
- not2b 1y ago
  An animated GIF is essentially a video with a large number of restrictions and poor compression compared to an actual video. Often sites convert animated GIFs to videos because the result is smaller and works better.
pcthrowaway 1y ago
The SVG trick is less usable for screen captures IMO, since you lose controls. I think it's best for embedding a motion demo of a feature your software provides, no more than 5 seconds. Even then, a video option may be useful to some people.
socalgal2 1y ago
SVG can be color responsive (change color based on the user's dark/light prefs). It can also be size responsive (change based on max width or aspect). Video can't https://jsbin.com/nohamuguze/edit?html,css,output https://jsbin.com/nohamuguze/edit?html,css,output edit: sigh.... Works in Firefox and Chrome. Has issues in Safari - I'm sure I could futs with it more and get it to work everywhere but still, sadness
felizuno 1y ago
wow Paul I haven't seen your name in years but loved what you used to do with Echo Nest and the Rdio API <3
- paulirish 1y ago
  That mighta been Paul Lamere, but.. Then again I did fuck around with Echo Nest stuff forever ago.

c-hendricks 1y ago

If you're going this route of adding a straight up video (which isn't bad!) it helps to edit the readme directly on GitHub. That way they're uploaded to githubusercontent (or whatever the domain is) and not taking up space in your repository.

hbn 1y ago
Were people doing that other option? The idea of committing a video to your repository for a PR seems silly. Every PR adds a new video to the codebase? Do you make a PR to prune them every once in a while?
- aziaziazi 1y ago
  > Every PR adds a new video to the codebase Git commits only differences with the precedent commit, not the entire repository. Therefore the video is only committed once as long as that video doesn’t change.

pamelafox 1y ago

The nice thing about videos is the play/pause/slider UI. Some platforms do add play/pause explicitly to GIFs, using some JS, but as far as I know (and you would know more), that's not built into browsers yet. That's been one of the reasons I often end up using videos instead. When I've personally animated SVGs for use in RevealJS presentations, I tend to use CSS animations that I could control with JS if I wanted.

kzrdude 1y ago
If this gets widespread use, browsers will catch up and in 5-10 years we will have pause buttons! ;)
- justsomehnguy 1y ago
  Meanwhile we are still have a stupid overlay controls because 20 years ago it was an iframe for an ActiveX control.
not2b 1y ago
An animated GIF is essentially a video with a large number of restrictions and poor compression compared to an actual video. Often sites convert animated GIFs to videos because the result is smaller and works better.

pcthrowaway 1y ago

The SVG trick is less usable for screen captures IMO, since you lose controls. I think it's best for embedding a motion demo of a feature your software provides, no more than 5 seconds. Even then, a video option may be useful to some people.

socalgal2 1y ago

SVG can be color responsive (change color based on the user's dark/light prefs). It can also be size responsive (change based on max width or aspect). Video can't https://jsbin.com/nohamuguze/edit?html,css,output https://jsbin.com/nohamuguze/edit?html,css,output edit: sigh.... Works in Firefox and Chrome. Has issues in Safari - I'm sure I could futs with it more and get it to work everywhere but still, sadness

felizuno 1y ago

wow Paul I haven't seen your name in years but loved what you used to do with Echo Nest and the Rdio API <3

paulirish 1y ago
That mighta been Paul Lamere, but.. Then again I did fuck around with Echo Nest stuff forever ago.