HTML-Video

Die Media-Übersicht hat mehrere Familien gezeigt. Diese Sitzung vertieft eine davon: das Element video für Clips und Demos, die Sie selbst hosten. Geben Sie Besuchern mit controls eine Play-/Pause-Oberfläche, statt sie mit automatisch gestartetem Ton zu überraschen.

Was video leistet

video weist den Browser an, eine Filmdatei zu laden und auf der Seite darzustellen. Sie können mit src auf eine Datei zeigen oder mehrere <source>-Kinder auflisten, damit der Browser ein unterstütztes Format wählen kann. Optionale Attribute reservieren Größe (width / height), zeigen vor dem Abspielen ein Standbild (poster) und stellen native Steuerung bereit.

Direkte Antwort

Verwenden Sie <video controls src="movie.mp4"> oder verschachteln Sie <source>-Kinder für mehrere Formate. Fügen Sie ein poster-Bild als Vorschauframe vor dem Abspielen hinzu. Platzieren Sie kurzen Fallback-Text (und optional einen Download-Link) innerhalb von video für Agenten, die das Medium nicht abspielen können. Bevorzugen Sie komprimierte Dateien mit vernünftiger Größe.

Einfaches Video mit controls

Ein einzelnes MP4 plus controls und eine Breite reichen für viele Lehrseiten.

Das einfache Beispiel lesen

• controls fordert vom Browser eine Play-/Pause-Oberfläche an
• width="480" hilft, Layout-Platz zu reservieren, während die Datei lädt
• src zeigt auf die Filmdatei in Ihrem media-Ordner
• Text innerhalb von video ist Fallback-Inhalt, wenn das Element nicht unterstützt wird

Mehrere Quellen und ein poster

Browser unterscheiden sich in der Formatunterstützung. WebM und MP4 mit type-Hinweisen plus ein poster-Standbild sind ein gängiges Praxismuster.

Das Mehrquellen-Beispiel lesen

• poster zeigt ein Vorschaubild, bis die Wiedergabe beginnt
• Jedes source nennt eine Datei und einen MIME-type
• Der Browser wählt die erste Quelle, die er abspielen kann
• Der Download-Link innen hilft, wenn Wiedergabe nicht verfügbar ist

Dateigröße und Formate

Riesige Kamera-Exporte stocken auf langsamen Netzen. Exportieren Sie ein webtaugliches MP4 (optional auch WebM), das zum Lehrbedarf passt — kurze Demos schlagen mehrgigabyteige Masterdateien auf einer Lektionsseite. Sie brauchen nicht jeden Container am ersten Tag; bringen Sie ein klares MP4 zum Laufen, dann fügen Sie ein zweites Format hinzu, wenn Ihr Publikum es braucht.

Autoplay: zuerst controls lernen

Autoplay mit Ton wird oft blockiert und ist meist schlechte Manieren. Gedämpfte Autoplay-Tricks gibt es für Marketing-Heroes, aber Anfänger sollten zuerst controls und vom Nutzer gestartete Wiedergabe beherrschen. Wenn Sie später Autoplay brauchen, lesen Sie Browser-Richtlinien sorgfältig und behalten Sie einen zugänglichen Pause-Pfad.

Untertitel und Barrierefreiheit (Gewohnheit)

Wenn gesprochener Inhalt etwas Wichtiges lehrt, planen Sie Untertitel oder ein Transkript — auch wenn Sie vollständige track-Elemente erst in einem späteren Durchgang anbinden. Verlassen Sie sich nicht allein auf das poster-Bild als einzige zugängliche Zusammenfassung einer Talking-Head-Lektion.

Breite, Höhe und Layout

width (und passendes height, wenn Sie das Seitenverhältnis kennen) reduziert Layout-Sprünge, während die Video-Metadaten laden. Dehnen mit unpassenden Zahlen wirkt falsch; behalten Sie das echte Seitenverhältnis im Blick — wie bei Bildern.

Übung im Editor

1. Legen Sie eine kurze .mp4 in einen media-Ordner.
2. Einbetten mit video + controls + einer sinnvollen Breite.
3. Fallback-Text innerhalb des Elements hinzufügen.
4. Optional ein poster-Bild und ein zweites source-Format ergänzen.
5. Seite öffnen, abspielen und pausieren, dann wenn möglich mit gedrosseltem Netz testen — merken Sie, warum die Dateigröße zählt.

Typische Fehler

• Fehlende controls, sodass Nutzer nicht leicht abspielen können
• Riesige unkomprimierte Dateien, die auf langsamen Netzen stocken
• Fallback-Text oder Download-Link vergessen
• Autoplay mit Ton greifen, bevor die Grundlagen sitzen
• alt auf video setzen wie auf img (stattdessen Untertitel/Transkripte und sichtbare Beschreibungen nutzen)
• Gehostete YouTube-Einbettungen (iframe) mit selbst gehosteten video-Dateien verwechseln

Zusammenfassung

• video bettet Filmdateien ein, die Sie hosten
• Nutzen Sie controls für die Abspiel-Oberfläche
• Mehrere source-Tags verbessern die Formatunterstützung
• poster zeigt vor dem Abspielen einen Vorschaurahmen
• Bevorzugen Sie komprimierte Dateien und vermeiden Sie überraschenden Autoplay-Ton