Ruta por la costa
Videosteuerung aus Glas
Eine Glaskapsel mit Play, Fortschrittsbalken und Zeit über einer Videoszene, die beim Abspielen lebendig wird.
Einstellungen
Code
<div class="uv-gvc"><div class="sn" aria-hidden="true"><i class="sun"></i><i class="cl a"></i><i class="cl b"></i><i class="hl"></i></div><p class="ti">Fahrt entlang der Küste</p><div class="cb"><button type="button" class="pp" aria-label="Abspielen" aria-pressed="false"><svg class="pl" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l10.5-6.5z" fill="currentColor"/></svg><svg class="pa" viewBox="0 0 24 24" aria-hidden="true"><rect x="6.5" y="5.5" width="4" height="13" rx="1.2" fill="currentColor"/><rect x="13.5" y="5.5" width="4" height="13" rx="1.2" fill="currentColor"/></svg></button><span class="tm">0:42</span><input type="range" min="0" max="180" value="42" aria-label="Position"><span class="tm du">3:00</span></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Liquid Glass
Alle ansehen: Liquid GlassWofür du ihn nutzen kannst
Videoplayer legen ihre Steuerung zunehmend als einzelne Glaskapsel über das Bild. Diese sitzt unten in einer Sonnenuntergangsszene: Der Play-Button wird zu Pause, der gestaltete Schieberegler füllt sich mit der Zeit und die verstrichene Zeit aktualisiert sich jede Sekunde, während Wolken nur beim Abspielen durch die Szene ziehen.
Der Regler ist ein natives Range-Input mit einem Griff, der beim Ziehen wächst, er funktioniert also mit Tastatur und Touch. Verbinde Play und Regler mit einem echten Video-Element und behalte Layout und Zustände bei.