VideoPlayer

learning · interactive (ships a small web component) · no children. All components: component playground.

Description for the model

Video with poster, chapters and transcript. HLS streams load a player only when played.

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "VideoPlayer",
  "props": {
    "src": "https://example.org/media/bloom.mp4",
    "poster": "/og-image.png",
    "width": 1280,
    "height": 720,
    "title": "The bloom, explained",
    "chapters": [
      {
        "time": 0,
        "title": "Why bloom"
      },
      {
        "time": 45,
        "title": "Timing"
      }
    ]
  }
}

Props

Prop	Type	Required	Notes
src	string (href)	yes	Video URL (.mp4 or .m3u8). max length 2048
poster	string (href)		Poster image URL. max length 2048
width	integer		Width in px. ≥ 1, default 1280
height	integer		Height in px. ≥ 1, default 720
title	string	yes	Accessible title. max length 160
chapters	array of objects		Chapters. max 40 items
chapters[].time	integer	yes	Start in seconds. ≥ 0
chapters[].title	string	yes	Chapter. max length 120
id	string		Anchor id for in-page links (letters, digits, dashes). max length 40

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

Video: The bloom, explained

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "src": "ftp://x",
  "title": "No"
}

Issues:

• /src unsafe or empty link

Rendered as:

Video: No

Accessibility

axe-core: 14 rules passed, 0 violations, 1 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.