HTML incident evidence project: keep a record readable when video fails

Build the record

Use case C-47 as a bounded exercise. The first screen identifies the record and shows three evidence events in order. A reader can review the table without playback. The clip adds inspection detail; the transcript records spoken instructions, a warning tone, and the split seal visible in the frame. If a future edit changes the clip, revise its captions and transcript together. This project is about document structure, not a working evidence store or an authenticated case system.

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Case C-47 evidence record</title></head>
<body>
<main>
  <h1>Case C-47 evidence record</h1>
  <p>Parcel held after the upper seal split was found at intake.</p>
  <table>
    <caption>Evidence recorded for case C-47</caption>
    <thead><tr><th scope="col">Time</th><th scope="col">Event</th><th scope="col">State</th></tr></thead>
    <tbody>
      <tr><td>08:14</td><th scope="row">Seal check</th><td>Split found</td></tr>
      <tr><td>08:19</td><th scope="row">Photograph</th><td>Stored for review</td></tr>
      <tr><td>08:27</td><th scope="row">Dispatch hold</th><td>Open</td></tr>
    </tbody>
  </table>
  <h2>Seal inspection clip</h2>
  <video controls preload="metadata" width="720" height="405">
    <source src="/media/C-47-seal.webm" type="video/webm">
    <track kind="captions" src="/media/C-47-seal.en.vtt" srclang="en" label="English captions" default>
    <p>The clip is unavailable. Read the transcript below.</p>
  </video>
  <h3>Descriptive transcript</h3>
  <p>Inspector: “Stop dispatch.” A warning tone sounds. The upper seam is split above the parcel code; the inspector places the parcel on the hold shelf.</p>
</main>
</body></html>

Behavior and cost

The clip and caption file are illustrative local paths; this static lesson does not ship them. A real case page needs an authorized route, real media, and review of the entire final transcript. The table costs little to render. Video bytes, storage, and revision work dominate. Test at narrow widths and without video loading: the record should still say what happened. Do not treat the table's state words as an auditable history unless the backend supplies immutable event data.

Common Mistakes

• Do not make the video the only source of a decision-critical fact.
• Do not publish a transcript excerpt as the full account of a longer clip.
• Do not present fictional case data as a live record.

Connected lessons

• HTML table caption and summary: explain a dense data grid
• HTML video transcript: retain information beyond timed captions
• HTML video tracks: expose controls and a caption file
• HTML data tables: name row and column relationships explicitly

Style this pattern

• CSS incident report project: readable on screen and on paper
• CSS multi-column layout: fragment long text without breaking meaning

Further CSS decisions

• CSS break-inside: keep small report units together in print

Rendering decisions

• CSS @page: set a print sheet contract without hiding overflow

CSS behavior decisions

• CSS view timelines: tie optional motion to visible progress