Media-Player-UI-System

Media Player UI System

Zweck

Das Media Player UI System bietet ein standardisiertes, barrierefreies und responsives visuelles Design-Framework für die Einbettung benutzerdefinierter Video- und Audio-Player-Oberflächen. Die nativen HTML-<video>- und <audio>-Steuerelemente des Browsers weisen erhebliche Einschränkungen auf: inkonsistentes visuelles Styling über verschiedene Browser hinweg, fehlende Markenanpassung, schlechte Touch-Ziel-Abstände, unoptimierte Steuerungsdichte auf mobilen Ansichtsfenstern und unvorhersehbare Tastaturfokus-Barrierefreiheit.

Das Design eines effektiven benutzerdefinierten Media Players erfordert die Abwägung von Videoleinwand-Rahmung, überlagerten Gradientenschutz, räumlicher Hierarchie der Steuerleiste (Play/Pause-Auslöser, Suchleisten, Lautstärkeregler, Wiedergabegeschwindigkeit, Qualität, Untertitel, Bild-in-Bild, Vollbild), responsive Dock-Übergänge und vollständige WCAG-AA-Barrierefreiheitskonformität. Dieses Skill überbrückt Design und technische Implementierung, indem es Layoutregeln, Interaktionszustände, Touch-Ergonomie und Screenreader-Tastatursteuerungen für Web-Video- und Audio-Erlebnisse definiert.

Anwendungsfälle

• Online-Videokurse und Lernplattformen: Strukturierung benutzerdefinierter Videoplayer mit Auswahlmöglichkeiten für die Wiedergabegeschwindigkeit, Kapitelmarkierungen, Umschaltung von Untertiteln, Tastaturkürzeln und Transkript-Synchronisation.
• SaaS-Marketing-Produktdemos und Hero-Videos: Design von leichten, markenspezifischen Inline-Videoplayern mit schwebenden Overlay-Auslösern, Loop/Stumm-Schaltern und anhaftenden Bild-in-Bild-Docking beim Scrollen.
• Podcast- und Audio-Streaming-Plattformen: Aufbau persistenter unterer Audio-Player-Docks, Inline-Audio-Karten-Player, Wellenform-Visualisierungen und Skip-Vorwärts/Rückwärts-Sprungsteuerungen.
• Medienportale und redaktionelle Nachrichtenseiten: Präsentation responsiver Hero-Videoplayer mit Qualitätsauswahl, Bild-in-Bild-Optionen, verwandten Video-Overlays und barrierefreien Untertiteln.
• Designsystem-Komponentenbibliotheken: Etablierung standardisierter, thematisierbarer Media-Player-Visual-Blueprints und Barrierefreiheitsmuster für Enterprise-Designsysteme.

Wann NICHT zu verwenden

• Unformatierte Browsersteuerelemente: Für schnelle interne Tools oder einfache Prototypen, bei denen die nativen Browser-Steuerelemente (controls-Attribut) ausreichen, genügt das standardmäßige HTML-Markup.
• Vollständige Videobearbeitungs- oder Canvas-Zeitleisten-Workstations: Für nicht-lineare Web-Videoeditoren mit mehreren Spuren, die Timeline-Scrubbing-Tracks, Keyframe-Manipulation und WebGL-Canvas-Rendering erfordern, verwenden Sie spezialisierte Videobearbeitungsanwendungen.
• Reine Hintergrund-Dekorations-Animationen: Für Umgebungs-CSS- oder Canvas-Animationen ohne Audio, Suchsteuerungen oder Benutzerwiedergabesteuerungen verwenden Sie interface-motion-system oder standardmäßige stummgeschaltete Hintergrundschleifen.
• Statische Bild-Lightboxen und Galerien: Für die Anzeige von Standfotos oder Diashows ohne zeitbasierte Medienwiedergabe verwenden Sie image-gallery-and-lightbox-system.

Eingaben

1. Medientyp und Seitenverhältnis: Audio- vs. Videoformat, native Seitenverhältnisse (16:9 Breitbild, 9:16 vertikales Video, 1:1 Quadratisch oder flexible Audiohöhe).
2. Anforderungen an die Steuerungsdichte: Erforderliche Mediensteuerungen (z. B. Play/Pause, Timeline-Scrubber, aktuelle Zeit/Dauer, Lautstärke, Wiedergabegeschwindigkeit, CC/Untertitel, Qualitätsauswahl, PiP, Vollbild, Springe 10s).
3. Design- und Marken-Tokens: Farb-Tokens für Steuerleisten-Hintergrund-Overlays, primäre Marken-Highlights beim Abspielen, Scrubber-Fortschrittsbalken, Fokusringe und Typografie (aus accessible-color-system, focus-indicator-design-system und fluid-typography-system).
4. Layout-Shell-Kontext: Platzierungsumgebung (eingebettete Inline-Karte, vollbreiter Abschnitt Hero, unteres persistentes Sticky-Dock, modales Overlay-Dialogfeld).

Ausgaben

1. Räumliches Layout und Seitenverhältnis-Container: CSS-Architektur, die responsives Framing, Erhaltung des Seitenverhältnisses und Overlay-Stapelkontexte etabliert.
2. Hierarchie-Blueprint der Steuerleiste: Visuelles räumliches Layout für Mediensteuerungs-Symbolleisten (linke Wiedergabesteuerungen, zentraler Timeline-Scrubber, rechte sekundäre Steuerungen/Vollbild).
3. Spezifikation für Scrubber-Zeitleiste und Lautstärkeregler: Barrierefreie Bereichssteuerungen mit Hover-Zeitvorschau-Tooltips, Lade-Puffer-Indikatoren und visuellen Fortschrittsbalken.
4. Übergang zum anhaftenden Bild-in-Bild-Dock: Responsive Regeln für das Zusammenklappen von Videoplayern in schwebende Mini-Player in der unteren Ecke, wenn Benutzer über den primären Ansichtsfenster-Container scrollen.
5. Zugängliche ARIA- und Tastaturnavigationszuordnung: Vollständige Tastaturkürzel-Spezifikation (Leertaste, K, J, L, M, F, C, Pfeiltasten), ARIA-Live-Region-Statusansagen und WCAG-AA-Kontrastkonformität.

---

Arbeitsablauf

1. Einrichten des räumlichen Containers und des Seitenverhältnis-Rahmens

Strukturieren Sie den Basiscontainer, um Layout-Verschiebungen (CLS) während des Ladens der Medien zu verhindern:

• Seitenverhältnis-Box: Wickeln Sie Videoelemente in einen Container mit CSS-Seitenverhältnis (aspect-ratio: 16 / 9; width: 100%; position: relative; background: #000; border-radius: 8px; overflow: hidden;).
• Stapelung der Medienelemente:
  • z-index: 1: Nativer <video>- oder <canvas>-Medienelement, das den Container füllt (width: 100%; height: 100%; object-fit: contain;).
  • z-index: 2: Dunkler Gradienten-Overlay zum Schutz der Lesbarkeit der Steuerleiste (background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 40%, transparent 100%); pointer-events: none;).
  • z-index: 3: Zentraler großer Play/Pause-Button-Overlay oder Lade-Skeleton-Zustand.
  • z-index: 4: Container für die untere (und optionale obere) Steuerleisten-Symbolleiste.

2. Entwerfen Sie den zentralen großen Play-Trigger und Ladezustände

Bieten Sie prominente visuelle Hinweise für die anfängliche Wiedergabeaktivierung:

• Großer Play-Button-Overlay: Positionieren Sie einen prominenten 64x64px (Desktop) oder 56x56px (mobil) kreisförmigen Button im genauen visuellen Zentrum (top: 50%; left: 50%; transform: translate(-50%, -50%);).
  • Stil: background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(8px); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; color: #FFFFFF;.
  • Hover/Fokus: scale(1.1); background: var(--brand-primary); border-color: transparent;.
  • Verhalten: Blendet aus (opacity: 0; pointer-events: none; transition: opacity 0.25s ease;), sobald die Wiedergabe beginnt, und erscheint beim Pausieren wieder.
• Puffer-/Lade-Spinner: Zeigen Sie einen kontrastreichen kreisförmigen unbestimmten Spinner-Overlay an, der über der Videoleinwand zentriert ist, wenn der Medienpuffer unter die Wiedergabeschwelle fällt.

3. Erstellen Sie die Hierarchie der unteren Steuerleiste

Organisieren Sie die Steuerungen in einem sauberen 3-teiligen Flex-Layout, das am unteren Rand des Medienrahmens verankert ist:

• Container-Positionierung: position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; z-index: 4;.
• Primäre Scrubber-Reihe (Reihe 1): Platzieren Sie den interaktiven Timeline-Scrubber vollbreit über der Steuerleiste oder inline in horizontalen Layouts.
• Aktionsreihe der Steuerleiste (Reihe 2):
  • Linke Gruppe (Wiedergabe & Lautstärke):
    1. Play/Pause-Button: 40x40px Symbol-Button (aria-label="Play" / aria-label="Pause").
    2. Skip Rückwärts/Vorwärts (Optional): 36x36px Buttons für "Springe zurück 10s" / "Springe vorwärts 10s".
    3. Lautstärke-Gruppe: Stummschalten-Umschalt-Symbol-Button + Hover/Fokus erweiterbarer Bereichsregler (width: 0 -> 80px sanfter Übergang) oder persistenter Regler.
    4. Zeitanzeige: Textzähler 02:14 / 10:45 mit nichtproportionalen Zahlen (font-variant-numeric: tabular-nums; font-size: 0.8125rem; color: #FFFFFF;).
  • Rechte Gruppe (Einstellungen & Bildschirmmodi):
    1. Untertitel (CC)-Umschaltung: Symbol-Button mit visuellem aktivem Badge-Highlight, wenn aktiv (border-bottom: 2px solid var(--brand-primary)).
    2. Auslöser für das Wiedergabegeschwindigkeitsmenü: Dropdown- oder Popover-Button, der die aktive Rate anzeigt (z. B. 1.0x, 1.5x, 2.0x).
    3. Bild-in-Bild (PiP)-Auslöser: Symbol-Button zum Starten des Browser-PiP-Modus.
    4. Vollbild-Umschaltung: Symbol-Button zum Umschalten der Vollbildanzeige (aria-label="Enter fullscreen" / aria-label="Exit fullscreen").

4. Erstellen Sie einen barrierefreien Timeline-Scrubber und Lautstärkeregler

Timeline-Scrubber müssen vollständig touch-freundlich, präzise und über die Tastatur zugänglich sein:

• Range-Input-Architektur: Verwenden Sie <input type="range" min="0" max="100" step="0.1"> oder einen benutzerdefinierten ARIA-Schieberegler (role="slider", aria-valuemin="0", aria-valuemax="100", aria-valuenow="23", aria-valuetext="2 Minuten 14 Sekunden von 10 Minuten 45 Sekunden").
• Spur-Schichtung:
  1. Hintergrundspur: Basisgraue Spur (height: 4px; background: rgba(255,255,255,0.3); border-radius: 2px;). Erweitern Sie die Spur auf 8px Höhe bei Hover/Fokus.
  2. Pufferbalken: Sekundärer Balken, der den vorgeladenen Puffervideo anzeigt (background: rgba(255,255,255,0.5);).
  3. Abgespielter Füllbalken: Lebendiger primärer Farbbalken, der den abgespielten Fortschritt anzeigt (background: var(--brand-primary, #3B82F6);).
  4. Scrubber-Griff: 14x14px kreisförmiger Griff (background: #FFFFFF; box-shadow: 0 2px 4px rgba(0,0,0,0.4);). Erweitern Sie auf 18x18px bei Hover/Ziehen.
• Hover-Zeitvorschau-Tooltip: Zeigen Sie ein schwebendes Zeitstempel-Feld an (background: #000; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem;), positioniert über der Cursor-Hover-Position entlang der Scrubber-Spur.

5. Implementieren Sie Bild-in-Bild (PiP) und scrollgesteuertes anhaftendes Docking

Verhindern Sie den Verlust des Videokontexts, wenn Benutzer auf langen Artikel- oder Produktseiten nach unten scrollen:

• Scroll-Beobachter (IntersectionObserver): Verfolgen Sie, wann der primäre Mediencontainer aus dem aktiven Ansichtsfenster-Schwellenwert scrollt (<20 % sichtbar).
• Schwebender Mini-Player-Zustand:
  • Überführen Sie den Player in ein schwebendes fixiertes Eck-Dock (position: fixed; bottom: 24px; right: 24px; width: 320px; aspect-ratio: 16/9; z-index: 1000; box-shadow: var(--shadow-xl); border-radius: 12px; border: 1px solid var(--border-subtle); animation: slideInUp 0.3s ease;).
  • Fügen Sie einen Schließen/Erweitern-Button oben rechts im Mini-Player hinzu (aria-label="Dismiss sticky player" / aria-label="Return to video position").
  • Vereinfachen Sie die Steuerleiste im Sticky-Modus auf primäre Play/Pause-, Schließen- und Stumm-Auslöser.

6. Implementieren Sie Tastaturkürzel und ARIA-Barrierefreiheit

Stellen Sie die vollständige Tastatursteuerung ohne Maus- oder Zeigerinteraktionen sicher:

• Globale / fokussierte Tastaturkürzel:
  • Leertaste oder K: Play/Pause umschalten.
  • J: 10 Sekunden zurückspulen.
  • L: 10 Sekunden vorspulen.
  • Linke Pfeiltaste / Rechte Pfeiltaste: 5 Sekunden zurück-/vorspulen.
  • Pfeil nach oben / Pfeil nach unten: Lautstärke um 10 % erhöhen/verringern.
  • M: Stummschalten/Aufheben umschalten.
  • F: Vollbildmodus umschalten.
  • C: Untertitel ein/aus schalten.
  • 0 bis 9: Springe zu 0 % - 90 % der gesamten Videodauer.
• Screenreader-Statusansagen:
  • Senden Sie Statusaktualisierungen an eine unsichtbare aria-live="polite"-Region (z. B. "Pausiert bei 2 Minuten 14 Sekunden", "Lautstärke auf 80 % eingestellt", "Untertitel aktiviert").

---

Entscheidungsregeln

Konfigurationen des Media-Control-Bar-Layouts

Medientyp & Platzierung	Räumliches Muster der Steuerleiste	Empfohlene Schlüsselsteuerungen
Hero-Video / Kurs-Video (>640px)	Vollständige schwebende Overlay-Leiste	Vollständige Steuerungen: Großer zentraler Play, vollständiger Scrubber, Zeit, Lautstärke, CC, Geschwindigkeit, PiP, Vollbild.
Kompakte Inline-Videokarte (<480px)	Komprimierte schwebende Leiste	Wesentliche Steuerungen: Play/Pause, Inline-Scrubber, Zeit, Stummschalten, Vollbild.
Persistentes unteres Audio-Dock (Global)	Sticky 3-Spalten-Leiste	Links: Titelinfo (Miniaturansicht + Titel); Mitte: Play/Pause + Springe 10s + Scrubber; Rechts: Lautstärke + Wiedergabeliste.
Inline-Audio-Podcast-Karte	Horizontales eingebettetes Feld	Play/Pause-Kreisbutton, Titel + Fortschritts-Scrubber, Aktuelle Zeit / Gesamtdauer, Geschwindigkeitsmenü.

Strategie zum automatischen Ausblenden von Video-Overlays

• Bei Wiedergabe: Blenden Sie die Overlay-Steuerleiste nach 2,5 Sekunden Zeigerinaktivität innerhalb der Videoleinwand automatisch aus (opacity: 0; cursor: none; transition: opacity 0.3s ease;).
• Bei Pause oder Fokus: Halten Sie die Steuerleiste dauerhaft sichtbar (opacity: 1), sodass die Steuerungen sofort erreichbar bleiben.
• Bei Tastaturfokus: Wann immer der Tastaturfokus in einen Steuerungsknopf innerhalb des Players gelangt, halten Sie die Steuerungen sofort sichtbar (:focus-within { opacity: 1; }).

---

Einschränkungen

• Barrierefreiheit (WCAG 2.1 AA):
  • SC 1.2.2 Untertitel (voraufgezeichnet): Für synchronisiertes Videomedium mit Audiosprache muss ein Untertitel-Button bereitgestellt werden.
  • SC 1.4.3 Kontrast (Minimum): Steuerungssymbole, Textzähler und Scrubber-Fortschrittsbalken müssen mindestens ein Kontrastverhältnis von 4,5:1 gegenüber den Steuerungs-Overlay-Hintergründen aufweisen.
  • SC 2.1.1 Tastatur: Jede Player-Funktion (Play, Pause, Suche, Lautstärke, CC, Geschwindigkeit, Vollbild) muss vollständig über die Tastaturnavigation zugänglich sein.
  • SC 2.4.7 Fokus sichtbar: Fokussierte Player-Steuerungsknöpfe müssen einen unbeschnittenen kontrastreichen Fokusindikator anzeigen (outline: 2px solid #FFFFFF; outline-offset: 2px;).
  • SC 2.5.8 Zielgröße: Interaktive Steuerungsknöpfe und Schieberegler müssen eine Mindest-Tipp-Zielgröße von 24x24px (mindestens 44x44px für mobile/Touch-Ansichtsfenster) bieten.
• Verhinderung von Layout-Verschiebungen: Der Seitenverhältnis-Wrapper muss mit CSS aspect-ratio oder Padding-Top-Hacks deklariert werden, um Seitenlayout-Neuberechnungen während des Videoladens zu verhindern.
• Touch-Gesten-Ergonomie: Doppeltippen auf der linken/rechten Videoleinwand-Zone auf mobilen Touch-Geräten sollte einen 10-Sekunden-Skip rückwärts/vorwärts mit sichtbarem Ripple-Feedback auslösen.

---

Häufige Fehlermuster

• Unzugängliche native benutzerdefinierte Wrapper: Ausblenden nativer Browser-Steuerelemente, während keine Tastaturkürzel oder ARIA-Attribute auf benutzerdefinierten HTML-<div>-Buttons bereitgestellt werden, wodurch Tastatur- und Screenreader-Benutzer vollständig blockiert werden.
• Flackernde Overlay-Steuerungen: Ausblenden von Steuerleisten sofort ohne Verzögerung oder Übergang, während sich die Maus aktiv in der Nähe des Scrubber-Schiebereglers bewegt.
• Uneingeschränkte Vollbildskalierung: Fehler beim Beibehalten des korrekten Seitenverhältnisses im Vollbildmodus, was zu gestreckten oder verzerrten Videoproportionen führt.
• Kontrastarme Steuerungen über hellen Videobildern: Rendern von einfachen weißen Steuerungssymbolen ohne ein darunter liegendes dunkles Gradienten-Overlay (rgba(0,0,0,0.7)), wodurch Steuerungen über weißen/hintergrundbeleuchteten Videobildern unsichtbar werden. Fügen Sie immer ein Schutz-Gradienten-Overlay unter der Steuerleiste hinzu, um die Lesbarkeit der Symbole zu gewährleisten.