---
name: VideoPlayer
description: Onesown Blazor Komponente VideoPlayer (Viewer). Verwende diesen Skill wenn du die VideoPlayer-Komponente verwenden, konfigurieren oder debuggen moechtest.
---

# VideoPlayer

**Namespace:** `Onesown.Blazor.Components`  
**Kategorie:** Viewer  
**Basisklasse:** `FormControlBase`  

HTML5-Videoplayer mit eigener Steuerleiste, Kapitelnavigation und Sprungmarken-Unterstützung. Unterstützt Kapitel-Timestamps als Freitext, Vor-/Zurückspulen, Vollbild und Poster-Vorschau.

**Live-Demo:** https://components.schini.com/demo/videoplayer  

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``VideoPfad`` | ``string`` |  | Pfad oder URL zur Videodatei (z. B. "/videos/beispiel.mp4" oder absolute URL). Bei Nextcloud-URLs mit /download-Suffix wird automatisch ein Vorschaubild geladen. |
| ``Sprungmarken`` | ``string`` |  | Mehrzeilige Kapitel-Timestamps im Format "mm:ss Titel" oder "h:mm:ss Titel", ein Eintrag pro Zeile. Werden als navigierbare Kapitel-Liste im Player angezeigt. |

## Geerbte Parameter (FormControlBase)

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Size`` | ``string`` | ``OoSize.Md`` | Größe der Komponente. Mögliche Werte: OoSize.Xs, OoSize.Sm, OoSize.Md, OoSize.Lg, OoSize.Xl. Wird als CSS-Klasse am Root-Element gesetzt. |
| ``Id`` | ``string`` | ``Generator.GenerateRandomHtmlTagID()`` | Eindeutige HTML-ID des Input-Elements. Wird automatisch generiert und kann überschrieben werden (z. B. für Labels mit for-Attribut). |
| ``ShowLabel`` | ``bool`` | ``true`` | Blendet das Label über dem Eingabefeld ein oder aus. Standard: true. |
| ``IsFloatingLabel`` | ``bool`` | ``true`` | Aktiviert das schwebende Label (Floating Label), das beim Fokus oder bei Eingabe nach oben animiert. Standard: true. |
| ``Label`` | ``string`` |  | Beschriftung des Eingabefelds. Wird auch als Accessible-Name für Screenreader verwendet. |
| ``Placeholder`` | ``string`` | ``" "`` | Platzhaltertext im leeren Eingabefeld. Standard: Leerzeichen (verhindert Floating-Label-Sprung in Chrome). |
| ``AutoSaveCallback`` | ``EventCallback`` |  | Wird nach jeder Wertänderung ausgelöst und signalisiert der Seite, dass gespeichert werden soll. Kombinierbar mit TriggerAutoSaveCallbackOnlyIfValid. |
| ``TriggerAutoSaveCallbackOnlyIfValid`` | ``bool`` | ``true`` | Steuert ob AutoSaveCallback nur bei gültigem Wert ausgelöst wird. Standard: true. |
| ``AfterValueChanged`` | ``EventCallback`` |  | Wird nach jeder Wertänderung ausgelöst, unabhängig von der Gültigkeit des Werts. Geeignet für Live-Vorschau oder Seiteneffekte. |
| ``ShowValidationTooltip`` | ``bool`` | ``false`` | Zeigt Validierungsmeldungen als Tooltip neben dem Feld statt als Text darunter. Standard: false. |

## Hinweise

- Immer @bind-Value für Two-Way-Binding verwenden
- Für Formular-Validierung ValueExpression="() => _model.Property" setzen
- Komponente muss innerhalb eines <Form>- oder <EditForm>-Containers liegen, damit der EditContext greift
- AutoSaveCallback wird nach jeder gültigen Änderung ausgelöst, wenn TriggerAutoSaveCallbackOnlyIfValid=true (Standard)
- AfterValueChanged wird nach jeder Änderung ausgelöst, unabhängig von der Gültigkeit
- ShowValidationTooltip=true zeigt Validierungsmeldungen als Tooltip statt unter dem Feld
- Video-URL übergeben: VideoPfad="/videos/beispiel.mp4" (relative oder absolute URL)
- Sprungmarken definieren: Sprungmarken="00:00 Einleitung\n02:30 Hauptteil\n10:15 Zusammenfassung" (Zeilenformat: mm:ss Titel)
- Stunden-Format ebenfalls unterstützt: "1:02:30 Kapitelname"
- Kapitel-Liste wird automatisch in der Steuerleiste angezeigt wenn Sprungmarken gesetzt sind
- Poster-Bild: Bei Nextcloud-URLs (/download-Suffix) wird automatisch ein Preview-Bild geladen
- Komponentenreferenz nicht nötig – der Player steuert sich vollständig über JS