Video-Spieler — component.video-player
Video mit eigener Bedienleiste aus Tokens: Abspielen/Pause, Fortschritt mit Klick-Sprung, Zeitangabe, Ton, Vollbild — nutzt das native video-Element, kein Fremd-Player — v1.1: Leiste per Drag scrubbing-fähig
Componentv1.1.0Inhaltweb.documentweb.applicationdesktop.shellbuilder.preview
Beispiele
Ohne Datei: Platzhalter mit vollständiger Bedienleiste
Kein Video hinterlegt
Quadratisch (z.B. Social-Schnitt)
Kein Video hinterlegt
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
src | string | "" |
poster | string | "" |
title | string | "" |
ratio | string: 16:9 | 4:3 | 1:1 | 21:9 | "16:9" |
autoplay | boolean | false |
loop | boolean | false |
Events & Slots
Events: play, pause, ended
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--video-player-action-primary | var(--color-action-primary) |
--video-player-band-dark | var(--color-band-dark) |
--video-player-band-dark-muted | var(--color-band-dark-muted) |
--video-player-band-dark-text | var(--color-band-dark-text) |
--video-player-focus-ring-color | var(--focus-ring-color) |
--video-player-focus-ring-offset | var(--focus-ring-offset) |
--video-player-focus-ring-width | var(--focus-ring-width) |
--video-player-radius-control | var(--radius-control) |
--video-player-radius-full | var(--radius-full) |
--video-player-radius-surface | var(--radius-surface) |
Genutzte Design-Tokens
color.action.primary color.band.dark color.band.dark-muted color.band.dark-text focus.ring-color focus.ring-offset focus.ring-width font.family.default radius.control radius.full radius.surface size.1 size.16 size.2 size.3 size.8 text.sm text.xs