Video Section
A product video block with a drawn poster, a play key that opens an inline simulated player with chapters, a captions switch and three key points that jump to their chapter.
Preview
See it in action
Two minutes from messy notes to shared findings
Pebble in two minutes2:05 · 3 chapters
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| videoTitle | string | — | Name of the video for the play button and player. |
| duration | number | — | Length in seconds. |
| scene | (time: number) => ReactNode | — | Drawn frame for a time (simulated playback); keep it a pure function. |
| points | VideoKeyPoint[] | — | Up to three key points beside the video: { title, description?, start }. Each is a chapter. |
| posterTime | number | 0 | Time of the frame used as the poster. |
| captions | VideoCaption[] | [] | Captions drawn by the player. |
| defaultCaptions | boolean | true | Captions switch on at first. |
| title | ReactNode | — | Section heading. |
| description | ReactNode | — | Line under the heading. |
| eyebrow | ReactNode | — | Label above the heading. |
| headingLevel | 2 | 3 | 2 | Heading level of the title. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.