The builder creates a three-stage storyboard and README text for the fictional filter error. It keeps a repository media path separate from an unresolved attachment URL. Entering a source revision labels the proposed demonstration; it does not claim that a recording, upload or playback test happened.
Work through the example
Enter demo-r2 and Build README. The generated text names that revision, gives all three reproduction steps, and says the expected filter result is B alone while the proposed error retains A. The attachment remains TO CONFIRM. A blank revision blocks generation so an untraceable clip does not look ready.
Record media container, codec and duration only after the file exists. An attachment URL is different from a repository path. After an authorized upload, inspect README rendering, actual playback and the intended viewer’s access independently. Keep the prose reproduction usable without the clip, and repeat the reproduction after source changes before deciding whether an older recording still belongs in the README.
Plan a clip with one visible claim
Consider this invented filter demonstration. The initial list contains A, B, and C. You type B into the filter, but A remains visible. Reset restores all three entries. A proposed six-second silent clip can show those three stages without unrelated setup:
| Proposed interval | What appears | What the description establishes |
|---|---|---|
| 0 to 2 seconds | A, B, C and an empty filter | Starting state |
| 2 to 4 seconds | B entered; A remains visible | Intended reproduction of the filtering error |
| 4 to 6 seconds | Reset; A, B, C return | Reset behavior |
Those intervals are a storyboard, not observations from a recording. The sample does not establish an actual bug. Before recording a real project, confirm the intended rule: filtering for B should leave only B visible. Record the exact tested revision and the steps that produce the observed result. If the code changes, reproduce the behavior again and decide whether the old clip is still appropriate.
Give the README this independent text description: “Start with A, B, and C visible. Enter B in the filter. Expected: only B remains. In the proposed error case, A remains visible. Reset returns the full list.” Someone who cannot use the video still has the steps and the expected result. For this silent visual example, that prose describes the meaningful screen changes; it is not a claim that an audio transcript or caption track exists.
Keep the media path and attachment URL separate
media/demo.mp4 might identify a file in a repository. It is not evidence of a hosted attachment. Use separate fields for the source media path and the URL returned by GitHub after an authorized upload. Until then, the attachment URL is [TO CONFIRM]; do not invent an attachment hash or publish a guessed link.
The current GitHub attachment instructions explain that attaching a file uploads it immediately and inserts its URL. Therefore, selecting a file is an external upload step, even before a surrounding comment is submitted. Confirm the intended repository and permission to upload before attaching the file.
When you later assemble the README, use the actual returned attachment reference. Treat a repository-relative link as a separate route requiring its own rendered check. Do not assume that an arbitrary HTML video tag, autoplay setting, or caption-track attribute will be accepted unchanged by GitHub's Markdown renderer.
Check the clip, the README, and the viewer
Record the actual media container, codec, duration, and byte size after a file exists. A filename ending in .mp4 does not identify its codec. GitHub documents browser-specific video compatibility and recommends H.264; it also lists plan-dependent video upload limits. Confirm the applicable limit and test the intended browser rather than treating a six-second duration as proof that the file is acceptable. GitHub's current media guidance provides that starting point.
Recreate this example
Build one self-contained responsive HTML example titled “GitHub README video: prepare a traceable storyboard” for readers completing the stated task. Return the complete HTML with embedded CSS and JavaScript. Use no remote fonts, libraries, images, requests, account connections, or saved-state claims.
Use a proposed silent six-second storyboard: 0–2 seconds, A/B/C visible; 2–4 seconds, type B but A remains; 4–6 seconds, Reset restores all three. Show three text cards labeled as a plan. Start Source revision blank. Build README requires a revision and outputs a heading, revision, expected result (only B), proposed error (A remains), Reset step, text alternative, repository path media/demo.mp4 and separate attachment URL TO CONFIRM. Editing the revision clears the generated Markdown and requests another build. No fake playable player, asset, URL hash, upload or send button. Record native codec/duration/browser/render/access checks pending.
Use a three-frame bug storyboard with source revision input and generated README prose design with a compact header. Keep the actual sample data, controls, and useful default result visible early on a 360px-wide screen. Use readable text at least 16px, generous paragraph spacing, strong contrast, semantic labels, visible keyboard focus, and wrapping source blocks. Stack records on narrow screens rather than forcing a wide table.
Wire each action to an explicit type=button click handler using element selectors; the host permits scripts but blocks form submission. Update the visible result when the described action occurs. Show specific error feedback for invalid or missing input and clear stale feedback after dependent inputs change. Use plain text when displaying user values.
This storyboard and Markdown builder do not record media, upload to GitHub or test native playback/access. Keep the source fixture and worked teacher or developer example distinct from actual user records. Include the domain-specific explanation and next check beside the result. Provide no fake download, send, deployment, approval, or persistence button. Everything operates locally for the current page session.
Review the prepared copy in NOS
Record the real reproduction at the named revision, then follow the authorized attachment workflow. A storyboard review in NOS can help refine eligible static step descriptions visually. Preserve the actual returned URL and separate rendering, playback and viewer-access findings with the repository documentation.