Video-Spieler
Video mit eigener Bedienleiste aus Tokens: Abspielen/Pause, Fortschritt mit Klick-Sprung, Zeitangabe, Ton, Vollbild — nutzt das native video-Element, kein Fremd-Player
Nutzt: ui.icon
Beispiele
Ohne Datei: Platzhalter mit vollständiger Bedienleiste
Kein Video hinterlegt
Quadratisch (z.B. Social-Schnitt)
Kein Video hinterlegt
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| src | string | "" | Video-Datei (mp4/webm; leer = Platzhalter) |
| poster | string | "" | Vorschaubild |
| title | string | "" | Titel (über der Leiste) |
| ratio | string: 16:9 | 4:3 | 1:1 | 21:9 | "16:9" | Seitenverhältnis |
| autoplay | boolean | false | Automatisch starten (stumm) |
| loop | boolean | false | Wiederholen |
* Pflicht-Prop
Events & Slots
Events:
⚡ play⚡ pause⚡ ended — im Surface per on: {<event>: {action, params}} verdrahtbar.
Genutzte Design-Tokens
color.action.primarycolor.band.darkcolor.band.dark-mutedcolor.band.dark-textfocus.ring-colorfocus.ring-offsetfocus.ring-widthfont.family.defaultradius.controlradius.fullradius.surfacesize.1size.16size.2size.3size.8text.smtext.xs
LLM-Notizen
component.video-player
Video mit eigener Bedienleiste — nutzt das native video-Element, kein Fremd-Player, keine externe Abhängigkeit.
Wichtige Props
src(mp4/webm; leer = Platzhalter-Fläche),poster,title,ratio(16:9|4:3|1:1|21:9),autoplay(startet stumm),loop.
Hinweise
- Bedienleiste komplett aus Tokens: Abspielen/Pause, klickbarer Fortschritt (Pfeiltasten ±5 s), Zeitangabe, Ton, Vollbild.
- Emittiert
play,pause,ended— damit lassen sich Fortschritt oder Statistik anbinden. - Für YouTube/Vimeo-Einbettungen wäre ein eigener Baustein nötig (iframe + Datenschutz-Vorschaltung) — bewusst NICHT Teil dieses Players.