HTML for Video (htmlv): Der neue Standard für interaktive Videos
Key Takeaway: HTML for Video (htmlv) erweitert HTML und CSS um zeitreihenbasiertes Layout, AI‑Inhaltserzeugung und Zeit‑CSS‑Pseudo‑Klassen, sodass Webentwickler interaktive Videos ausschließlich mit bekannten Web‑Technologien erstellen können.
Zusammenfassung
- Ziel und Vision
- htmlv ist ein Markup‑Sprache‑Standard, der Webentwicklern erlaubt, reiche, interaktive Videos mit HTML‑ und CSS‑Syntax zu erstellen.
- Durch die Zeitleiste‑Dom (Temporal DOM) wird jedes Element mit einer Dauer, Start‑ und Endzeit versehen, wodurch Video‑Sequenzen programmiert werden können.
- Grundlegende Konzepte
- Time‑Based Layout: Inhalte werden innerhalb fester Bildschirmmaße und Framerate dargestellt, nicht vertikal scrollbar.
- Temporal DOM: Elemente existieren zeitlich, nicht nur räumlich.
- CSS/JavaScript‑Integration: HTML für Video nutzt CSS‑Eigenschaften und JavaScript für Interaktivität.
- Dokumentstruktur
- Dokumente beginnen mit
<!DOCTYPE htmlv>und besitzen<html>,<head>,<body>wie ein klassisches HTML. - Im
<head>können globale Meta‑Tage gesetzt werden (seed,framerate,compile-mode).
- Dokumente beginnen mit
- Elemente und Attribute
<scene>definiert ein Zeitsegment,styleenthält z. B.time-length,scene-transition.<text>,<video>,<audio>,<sequence>,<iframe>unterstützen jeweilssrc,style.- Spezielle Eigenschaften:
time-start,time-end,time-position,time-margin,time-padding,scene-transition.
- Neue Elemente (AI‑Features)
<ai-generate>: generiert Text, Bild, Audio oder Video aus Prompt, optional mit Seed und API‑URL.<ai-filter>: wendet KI‑Based Filters auf vorhandene Inhalte an.<ai-subtitle>: erzeugt automatische Untertitel aus Audiospur.<iframe>: bäckt ein weiteres htmlv‑Dokument ein.
- CSS‑Erweiterungen
- Time‑Based Pseudo‑Klassen:
:time(start, end). - Neuen Eigenschaften:
time-length,start,end,easing,time-position,text-display,text-duration. - Übergangseffekte für Szenen:
scene-transition: fade 2s;. - Loop‑Optionen:
none,loop,flipflap,stretch.
- Time‑Based Pseudo‑Klassen:
- JavaScript‑Interaktion
- Vor Rendern: DOM‑Manipulation zur Anpassung der Videostruktur.
- Laufzeit: Interaktive Anpassung von Szenen, Elementen, und Wiedergabe.
- Beim Encoding auf Standard‑Videoformate laufen nur Initialisierungsskripte; Interaktivität wird deaktiviert.
- Beispielstrukturen
- Basis‑Beispiel mit
<!DOCTYPE htmlv>,<scene>-Tage, Zeit‑ und Übergangseigenschaften. - Szene mit KI‑generiertem Video und Filter.
- Sequenz‑Video mit Bild‑Folien und Text.
- Einbettung eines weiteren htmlv‑Dokuments.
- Basis‑Beispiel mit
- Konfiguration
- Meta‑Tags:
framerate(z. B. 30fps),framerate-mode(slowdown,drop-frames),compile-mode(precompile,compile-during-playback).
- Meta‑Tags:
- Zukünftige Entwicklungen
- Spezifikation befindet sich in der Entwicklungsphase; Community‑Beiträge werden begrüßt.
Beispielanfragen
- Wie kann ich in htmlv eine animierte Texteffektsequenz erzeugen?
- Welche Vorteile bietet die AI‑Integration in htmlv gegenüber traditionellen Video‑Editing‑Tools?
- Welche Übergangseffekte stehen in htmlv zur Verfügung und wie setze ich sie ein?