Add video to quick start guide

[jmooring]

Closes #1906

Using github.com/charmbracelet/vhs, this places a responsive HTML video element on the page: WebM with an MP4 fallback.

Advantage of video over animated GIF:

• Smaller file size (at least with this 34s video)
• Users can pause with video controls
• We can control autoplay, loop, whether or not to show the playback controls, etc.
• Full screen mode is one of the playback controls.

The video shortcode is, for now, limited to page resources.

Files (16:9, 1024x576)

628K quickstart.mp4
584K quickstart.webm

I'm not entirely happy with the file sizes, but they're probably OK. The .tape file is checked into source control, adjacent to the video files. It can serve as a template for future use.

I probably went through 20+ iterations to refine this. The only complaint that I have about VHS is that the Sleep period (pause between commands) doesn't always do what you think it should do. It seems to depend on frame rate and perhaps the time required for the command to complete. Fixing this is the most liked issue.

Lighthouse performance score is 100 for this page.

Preview: https://deploy-preview-1908--gohugoio.netlify.app/getting-started/quick-start/

[coliff]

video looks great and format works well I think.
I wonder if the video should be a bit lower down in the page though as a user should read the prerequisites first?

[bep]

I get a lot of

~/d/g/g/h/c/e/g/quick-start ❯❯❯ vhs < quickstart.tape                                                                 add-video-to-getting-started ◼
 38 │ Type `echo "theme = 'ananke'" >> config.toml`
           ^ Type expects string

 38 │ Type `echo "theme = 'ananke'" >> config.toml`
           ^ Invalid command: `

 38 │ Type `echo "theme = 'ananke'" >> config.toml`
            ^^^^ Invalid command: echo

Trying to build the tape.

But if if I replace that line with a dummy command and create a GIF using the same settings:

(also, I suspect it's just a matter of months before VHS gets support for SVG/CSS).

What's the size of the GIF when you build it?

Note that I don't mind one or 2 500KB images/videos in there, but I'm curious about the conclusion ...

[jmooring]

Backticks as quotes were added a few days ago with 7ffc5f8f.

The GIF is 1.2 MB.

[bep]

OK, I fail to run the latest VHS version (ttyd 1.7.2 not yet available on Brew). I suggest we wait a little with this one until then.

[jmooring]

I'm fine with holding off. This was just an experiment.

One more test, at 640x360.

712K quickstart.gif
360K quickstart.mp4
364K quickstart.webm

The file sizes vary by 2-3% on each run.

At this size, when viewed at 100%, the font is a bit fuzzy. I was trying to find a middle ground so that it would look decent on the desktop, mobile, and in full screen mode (the later being less of a priority).

I'm not sure that a 37% reduction in WebM size is worth the loss in quality.