HTML- Video
Das HTML <video>
-Element wird verwendet, um ein Video auf einer Webseite anzuzeigen.
Das HTML-<video>-Element
Um ein Video in HTML anzuzeigen, verwenden Sie das <video>
Element:
Beispiel
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Wie es funktioniert
Das controls
Attribut fügt Videosteuerelemente wie Wiedergabe, Pause und Lautstärke hinzu.
Es ist eine gute Idee, immer width
und height
Attribute einzuschließen. Wenn Höhe und Breite nicht festgelegt sind, flackert die Seite möglicherweise, während das Video geladen wird.
Das <source>
Element ermöglicht es Ihnen, alternative Videodateien anzugeben, aus denen der Browser auswählen kann. Der Browser verwendet das erste erkannte Format.
Der Text zwischen den Tags <video>
und wird nur in Browsern angezeigt, die das Element </video>
nicht unterstützen .<video>
HTML <Video> Automatische Wiedergabe
Um ein Video automatisch zu starten, verwenden Sie das autoplay
Attribut:
Beispiel
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Hinweis: Chromium-Browser erlauben in den meisten Fällen keine automatische Wiedergabe. Stummgeschaltetes Autoplay ist jedoch immer erlaubt.
Fügen Sie muted
danach hinzu
autoplay
, damit Ihr Video automatisch abgespielt wird (aber stummgeschaltet):
Beispiel
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die das
<video>
Element 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
File Format | Media Type |
---|---|
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 <video>
Element.
Auf diese Weise 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 | Description |
---|---|
<video> | Defines a video or movie |
<source> | Defines multiple media resources for media elements, such as <video> and <audio> |
<track> | Defines text tracks in media players |