Video Poster Features Block for React

Replace the drawing inside the figure with your own video element and poster image, and keep the three cells as the chapter list. The control bar here is part of the drawing, so remove it if your player draws its own. Keep a text alternative or a caption track for the recording.

Edit CHAPTERS at the top of the file: each has a time in seconds, a title and a sentence, and LENGTH is the recording's length. The ticks on the control bar, the timestamps on the cells and the small marker on each cell's ruler are all placed from those numbers, so they can't drift apart.

It is the Timecode Text component, paused on the frame the poster shows (twelve seconds in), without frames. It's decoration, so it doesn't run and doesn't change.

The poster is one image with a text alternative that describes the scene and the caption, so the drawing's small text isn't read out piece by piece. The chapters are written out in the three cells, which are a real list with a heading each.

Everything in the poster is drawn in greyscale from your theme's tokens, with only the caption bar, the play pill and the toolbar chip filled dark, so the block follows light and dark themes and every preset. The receipt is a mono-spaced card with a torn foot and four scan corners.

The poster gets shorter and drops the report list, the toolbar and the extra icons, leaving the receipt in its drop zone, the caption and the control bar. The three cells stack one per row.