Oh, and to make this more than a simple rant/whine, some constructive suggestions that could possibly solve the problem:

- Normal video with playback controls?

- Add a clearly distinguishable "this is where it starts" screen.

- Is there maybe a way to control playback of a gif via JS/HTML? Add a "restart" button.

- Add a timeline into the .gif that shows where I am (similar to usual video player).

asciinema is open source and does this really cool thing where it actually emulates a terminal. asciinema recordings are tiny compared to real video, and get rendered as text by your browser, so everything is sharp and snappy.

Make it a webm. Then you can right click from pretty much any browser and click "show controls". See Gyfcat.

WebM is not supported on Safari (OSX or iOS) and is listed as only partially supported on Edge.

https://caniuse.com/#search=webm

You can view controls on GIFs in many cases as well, I believe.

Also, nobody seems to make use of these features, but GIFs do not have to loop, nor do they have to loop by going back to the very beginning of the animation as well. In particular, I find it extremely ineffective where there are GIFs that only show a "final product/scene" for like 1 frame before looping back to the beginning.

> You can view controls on GIFs in many cases as well, I believe

I don't think that's true.

Twitter and imgur do convert gifs to mp4, and you can see controls there, but that's because they're not gifs.

Do you have a citation or example of controls on actual gifs in any commonly used web browser?

Yea I am probably mistaken, this is likely gifv

are you thinking of .gifv which imgur supports?

yea I think you are probably right.

webm doesn't work on iOS if that matters

iOS does not support webm

Even better - make it an ASCIInema which gives you all that... and the ability to record from bash and copy and paste commands!

I've not had the opportunity to use this project yet, but https://github.com/nbedos/termtosvg seems to be another nice alternative. It provides the option of using templates that have playback controls or a progress bar. Also supports copying from the "terminal" like asciinema does.

Yes, termtosvg is a really good solution to this problem!

Here's an example with a pause/play button:

https://rawgit.com/nbedos/termtosvg/develop/examples/awesome...

Was it intentional to make ASCIInema sound like "ass enema"?

thanks. now I will never be able to unsee that.

And save about a million bytes in bandwidth.

Out of curiosity what does the industry best practice dictates between webm and mp4 for this kind of stuff?

- Which one is more accessible?

- Which one is more "compressed" and mobile ready?

You need both formats, mp4 for ios and webm for android

Not sure this is "standard" but imgur has their gifv "format" which will serve up the correct underlying format to the device

https://help.imgur.com/hc/en-us/articles/208606616-What-is-G...

why both? Android can do mp4, no?

WebM (or rather, VP8) uses less bandwidth and has better quality.

I believe technically it requires lower bitrates to maintain the same quality (as mp4 etc), as opposed to just having de facto better quality. The lower bitrate is what results in less bandwidth usage.

Well yeah, you can get lower bitrate with the same perceived quality, or better quality with the same bitrate, or a mixture of both. It all depends on what options you set when encoding.

Chromium browsers compiled without proprietary codecs require webm. It's a small subset of people (I am one), but I just don't play and/or leave sites with mp4 only.

Why is that? Are you "afraid" that mp4 have some embedded code that will run...idk I just made that up!

.mp4 videos usually use h264 compression (and now h265 for 4K/HDR), which is not free or open source. .webm uses VP8 or VP9.

It is kinda-sorta free and open source, though (at least the decoding part). Cisco pays for their codec, and as long as you use their implementation you are covered by their license.

Specifically, to be covered you have to download a binary release from https://github.com/cisco/openh264/releases during the installation to be covered by Cisco's MPEG LA patent license, but they provide builds for most major platforms.

Thanks a lot for your feedback. I think adding playback controls on hover is going to help a lot.

We picked video/gif as the delivery format to give people a real-life impression of performance. (I took the videos myself while using the platform on a regular production plan.)

And because it's an actual gif rather than re-badged mp4 (gifv) it's 1.6mb, it doesn't allow you control via browser controls and doesn't have a clear indicator of length.

Yeah they should've just used asciinema where you can actually manipulate time, and copy/paste directly from the video.

Totally feel you on this one, especially when the purpose is to inform/teach. I found this extension that helps: https://chrome.google.com/webstore/detail/play-the-gif/mchec...

I share your pain. Need an extension that would add playback controls to gifs, or at least "play from beginning"

People should really just use .mp4. They're smaller and have native playback controls, including restart, timeline, etc.

here https://chrome.google.com/webstore/detail/gif-scrubber/gbdac...

If it's not overdone, an animated walk-through can give you an impression of how simple something is - here a short animation can be worth a thousand words.

For more complex topics I find animations less helpful.

they do explain it. gifs have there place but this may be too long for a looping gif, i believe a proper stream would have been better to display the commands and process.

“Don't hold it like that!”