Video hinzufügen
Mit dem <video>-Element kannst du Videodateien direkt in eine HTML-Seite einbinden und im Browser abspielen. Es eignet sich zum Beispiel für Tutorials, Produktvorstellungen, Animationen oder kurze Erklärvideos.
Grundstruktur
Nicht jeder Browser unterstützt dieselben Videoformate. Deshalb ist es sinnvoll, mehrere Videoquellen mit dem <source>-Element anzugeben. Der Browser wählt dann automatisch das erste Format aus, das er abspielen kann.
HTML Codebeispiel
1<video width="320" height="240" controls>
2 <source src="movie.mp4" type="video/mp4" />
3 <source src="movie.ogg" type="video/ogg" />
4 Dein Browser unterstützt das Video-Element nicht.
5</video>Output
Erklärung:
- <video>: Bindet eine Videodatei in die Webseite ein
- <source>: Gibt eine mögliche Videoquelle an
- src: Pfad zur Videodatei
- type: Gibt das Dateiformat an, zum Beispiel video/mp4 für MP4
- controls: Zeigt Standard-Bedienelemente wie Play, Pause, Lautstärke und Vollbild an
- Fallback-Text: Wird angezeigt, wenn der Browser das Video-Element nicht unterstützt
Wichtige Attribute
| Attribut | Beschreibung |
|---|---|
| controls | Zeigt die Standard-Steuerelemente des Browsers an |
| autoplay | Startet die Wiedergabe automatisch |
| loop | Wiederholt die Wiedergabe fortlaufend |
| muted | Startet das Video ohne Ton |
| poster | Zeigt ein Vorschaubild an, bevor das Video gestartet wird |
| width / height | Bestimmt Breite und Höhe des Videos |
Beispiel mit Attributen
HTML Codebeispiel
1<video controls width="600" poster="vorschaubild.jpg">
2 <source src="video.mp4" type="video/mp4" />
3 Dein Browser unterstützt das Video-Element nicht.
4</video>Output
In diesem Beispiel ist das Video 600 Pixel breit. Solange die Wiedergabe noch nicht gestartet wurde, zeigt der Browser das angegebene Vorschaubild an.
Hinweis zu autoplay
Viele Browser erlauben automatisches Abspielen nur dann zuverlässig, wenn das Video stummgeschaltet ist. Deshalb wird autoplay häufig zusammen mit muted verwendet. Automatisch startende Videos solltest du sparsam einsetzen, da sie für Nutzer störend sein können.
Unterstützte Formate
Häufig verwendete Videoformate im Web sind MP4, WebM und OGG. MP4 wird von den meisten Browsern sehr gut unterstützt und ist daher oft die erste Wahl.
Barrierefreiheit
Wenn ein Video wichtige Informationen enthält, sind Untertitel, eine Textalternative oder eine kurze Zusammenfassung sinnvoll. Das verbessert die Verständlichkeit und macht die Inhalte für mehr Menschen zugänglich.
Im nächsten Kapitel lernst du: Einbettungen <iframe>