HTML -Video
Das HTML-Element <video> wird verwendet, um ein Video auf einer Webseite anzuzeigen.
Das HTML-<video>-Element
Um ein Video in HTML anzuzeigen, verwenden Sie das Element <video>:
Beispiel
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Ihr Browser unterstützt das Video-Tag nicht.
</video>
Try it Yourself »
Wie es funktioniert
Das Attribut controls fügt Videosteuerelemente wie Wiedergabe, Pause und Lautstärke hinzu.
Es ist eine gute Idee, immer die Attribute width und height einzubeziehen. Wenn Höhe und Breite nicht festgelegt sind, flackert die Seite möglicherweise, während das Video geladen wird.
Mit dem Element <source> können Sie alternative Videodateien angeben, aus denen der Browser auswählen kann. Der Browser verwendet das erste erkannte Format.
Der Text zwischen den Tags <video> und </video> wird nur in Browsern angezeigt, die dies nicht tun unterstützen, das Element <video>.
HTML <video> Autoplay (Automatisches Abspielen)
Um ein Video automatisch zu starten, verwenden Sie das Attribut autoplay:
Beispiel
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Ihr Browser unterstützt das Video-Tag nicht.
</video>
Try it Yourself »
Hinweis: Chromium-Browser erlauben in den meisten Fällen keine automatische Wiedergabe. Stummgeschaltetes Autoplay ist jedoch immer erlaubt.
Fügen Sie muted nach autoplay hinzu, damit Ihr Video automatisch abgespielt wird (jedoch stummgeschaltet):
Beispiel
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Ihr Browser unterstützt das Video-Tag nicht.
</video>
Try it Yourself »
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das Element <video> vollständig unterstützt.
| Element | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTML Videoformate
Es gibt drei unterstützte Videoformate: MP4, WebM und Ogg. Die Browserunterstützung für die verschiedenen Formate ist:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | YES | YES | YES |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
HTML Video - Medientypen
| Dateiformat | Medientyp |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML-Video – Methoden, Eigenschaften und Ereignisse
Das HTML-DOM definiert Methoden, Eigenschaften und Ereignisse für das Element <video>.
Damit können Sie Videos laden, abspielen und anhalten sowie Dauer und Lautstärke einstellen.
Es gibt auch DOM-Ereignisse, die Sie benachrichtigen können, wenn die Wiedergabe eines Videos beginnt, angehalten wird usw.
Eine vollständige DOM-Referenz finden Sie in unserer HTML-Audio/Video-DOM-Referenz.
HTML Video-Tags
| Tag | Beschreibung |
|---|---|
| <video> | Definieren Sie ein Video oder einen Film |
| <source> | Definiert mehrere Medienressourcen für Medienelemente, z <video> und <audio> |
| <track> | Definiert Textspuren in Mediaplayern |
