Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add video to quick start guide #1908

Closed
wants to merge 1 commit into from
Closed

Add video to quick start guide #1908

wants to merge 1 commit into from

Conversation

jmooring
Copy link
Member

@jmooring jmooring commented Nov 22, 2022

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
Copy link
Member

coliff commented Nov 22, 2022

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
Copy link
Member

bep commented Nov 22, 2022

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:

image

(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
Copy link
Member Author

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

The GIF is 1.2 MB.

@bep
Copy link
Member

bep commented Nov 22, 2022

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
Copy link
Member Author

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.

@jmooring jmooring closed this Nov 22, 2022
@jmooring jmooring deleted the add-video-to-getting-started branch November 22, 2022 16:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Use VHS to create animated WebP images for quick tutorial (and possibly others)
3 participants