Video Player

name: "Video Player"
short_description: A VOD player skeleton with play/pause, seek scrubber, volume, speed, and fullscreen.
long_visual_description: >
  A 16:9 player over a poster with a gradient control bar: a seek scrubber that fills as
  it plays, a play/pause toggle, a mute toggle, a time label, a playback-speed cycle
  button, and a fullscreen button.

use_cases:
  - On-demand video playback on a watch page.
  - Course or tutorial video.
  - Embedded product or marketing video.
  - Recorded webinar or talk.
  - Any inline video needing standard controls.

recommended_for:
  - Playing an on-demand video with a full control set.
avoid_for:
  - Live streams (use video-player-live).
  - Audio-only playback (use audio-player).

markets:
  - Global

example_usage: >
  Provide src to make the controls functional against a real <video>; without it the
  poster shows and the controls still toggle their state for preview. Guard the <video>
  with a source so an empty src doesn't resolve to the page URL. Set a shared sync_id on
  this player and on a video-scrubber, video-transcript, or video-chapters to keep them in
  sync — the player broadcasts its position and accepts their seek requests.
  Layout: when this player is shown together with a video-transcript or video-chapters,
  wrap both in a split-view container at ratio 70-30 — this player in the start pane (70%)
  and the transcript/chapters in the end pane (30%); the panes stack full-width on mobile.
  When the player stands alone (no transcript/chapters), do not use split-view — render it
  full width, or place it in whatever container the surrounding page calls for.
  Slot a video/watch-next-rail (or any suggested-videos markup) into the end_screen slot to
  reveal an overlay of what to watch next when the video finishes — it appears on the video's
  "ended" event and hides again on replay.

props:
  title: The video title (for context/labelling).
  poster: The poster frame shown before playback.
  src: The video file URL.
  duration: The time label (e.g. "0:00 / 42:18").
  credit: Optional attribution caption under the player (supports inline HTML, e.g. a source and licence link for CC video).
  sync_id: Optional id that links satellite components (scrubber/transcript/chapters) to this player.

example_prompts:
  - "Add a video player with play/pause, scrubber, speed, and fullscreen."
  - "Add an on-demand video player with a poster."
  - "Add a video player with a sync_id so a transcript and chapters stay in sync with it."

relationships:
  parents:
    - layout/split-view
  related:
    - video/video-scrubber
    - video/video-transcript
    - video/video-chapters
    - video/watch-next-rail

lifecycle: experimental
content_model: A video surface with a standard set of playback controls.

theming:
  tokens_used:
    - --color-primary
    - --radius-card
    - --radius-control
    - --radius-pill
    - --shadow-card

editorial_guidance: >
  Provide a representative poster frame; keep the title concise where shown.

categorization:
  category: Video
  subcategory: Players
  atomic_type: organism
  usage_type: [player, media]
  maturity: ai-generated
  wcag:
    level: AA
    notes: Controls are real buttons with labels and aria-pressed toggles; the scrubber is a role="slider" with aria-valuenow and Arrow-key seeking and is focusable. A production build should add captions and keyboard shortcuts.
  keyboard_support: Play/mute/speed/fullscreen activate on Enter/Space; the scrubber is focusable and seeks with ArrowLeft/ArrowRight.
  seo_score: 40
  text_direction: both