Media Playback Patterns

Transcript Markers

A transcript panel shows pinned time markers and a current segment state without speech recognition or live sync.

Program

Transcripts can show time markers and a current segment without depending on real playback sync. This lesson uses static transcript data.

transcript_time_markers.html
Visuals: captured from real browser rendering
<section class="transcript-panel" aria-labelledby="transcript-title">
  <h2 id="transcript-title">Transcript</h2>
  <ol>
    <li><time datetime="PT0S">00:00</time> Welcome to the recap.</li>
    <li aria-current="true"><time datetime="PT12S">00:12</time> The replay steps are visible.</li>
    <li><time datetime="PT28S">00:28</time> Check the final state.</li>
  </ol>
  <p class="note">Static transcript data only; no speech recognition or sync runs.</p>
</section>
<style>
  .transcript-panel { display: grid; gap: 10px; max-width: 34rem; border: 1px solid #94a3b8; padding: 12px; }
  .transcript-panel ol { display: grid; gap: 8px; margin: 0; padding-left: 1.5rem; }
  .transcript-panel li[aria-current="true"] { background: #ecfdf5; border: 1px solid #0f766e; padding: 6px; }
  .transcript-panel time { font-variant-numeric: tabular-nums; color: #475569; }
  .note { margin: 0; color: #475569; }
</style>

  1. Label the transcript panel.

    The panel is labelled by its visible heading.
    The panel is labelled by its visible heading.

  2. Use an ordered list for transcript entries.

    The transcript entries are grouped in a readable sequence.
    The transcript entries are grouped in a readable sequence.

  3. Show the first pinned time marker.

    The first transcript line starts at the pinned 00:00 marker.
    The first transcript line starts at the pinned 00:00 marker.

  4. Mark the current segment.

    The 00:12 line is marked as the current static segment.
    The 00:12 line is marked as the current static segment.

  5. Show the final pinned marker.

    The final line shows another pinned time marker.
    The final line shows another pinned time marker.

  6. Check the transcript markers.

    The transcript uses pinned time markers and says no speech recognition or sync runs.
    The transcript uses pinned time markers and says no speech recognition or sync runs.
time markers Each transcript line has a pinned time marker.
current segment aria-current marks the visible current segment state.
no speech sync The lesson should not imply recognition or live media sync.