HTML <video>-Tag
Das <video>-Tag ist eines der HTML5-Elemente. Es wird verwendet, um Videos in ein HTML-Dokument einzubetten. Da nicht alle Browser dieselben Videoformate unterstützen, sollten Sie mehrere Videoformate bereitstellen, um eine korrekte Wiedergabe zu gewährleisten. Ein Pfad zur Videodatei ist im <source>-Tag oder im src-Attribut verschachtelt.
Sie können dem <video>-Tag auch einen alternativen Text hinzufügen, der angezeigt wird, falls der Browser das Videoformat nicht unterstützt.
Für das <video>-Element werden 3 unterstützte Videoformate angeboten: MP4/MPEG 4, WebM und Ogg. Zur Komprimierung und Dekomprimierung großer Videodateien werden spezielle Programme, sogenannte Codecs, verwendet.
MP4/MPEG 4-Dateien werden mit H264-Video- und AAC-Audio-Codecs verwendet, WebM-Dateien mit VP8- oder VP9-Video-Codecs sowie Vorbis- oder Opus-Audio-Codecs; und Ogg-Dateien mit dem Theora-Video-Codec und dem Vorbis-Audio-Codec.
Um die Steuerung von Video- und/oder Audioinhalten zu ermöglichen, können Sie verschiedene Events verwenden. Solche Events ermöglichen die Überwachung des Fortschritts des Medien-Downloads und der Wiedergabe sowie der Wiedergabeposition und des Status.
Um die Positionierung des Videos innerhalb des Elementrahmens zu ändern, können Sie die CSS-Eigenschaft object-position verwenden. Wenn Sie steuern möchten, wie die Größe des Videos angepasst wird, um in den Rahmen zu passen, nutzen Sie die Eigenschaft object-fit.
Sie können Ihrem Video mit JavaScript über das <track>-Element und das WebVTT-Format Untertitel hinzufügen. Sie können auch Audiodateien mit <video> abspielen, was in einigen Fällen nützlich sein kann.
Das <video>-Element ist ein ersetztes Element mit der Standard-Eigenschaft display: block. Das Styling wird typischerweise über width/height oder CSS-Eigenschaften wie object-fit und object-position gesteuert.
Syntax
Das <video>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<video>) und dem schließenden (</video>) Tag geschrieben.
Beispiel für das HTML <video>-Tag mit den Attributen controls, muted und src:
Beispiel für das HTML <video>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video{
width: 300px;
height: 200px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls muted src="https://de.w3docs.com/build/videos/arcnet.io(7-sec).mp4" playsinline>
<track default kind="subtitles" srclang="en" src="https://de.w3docs.com/build/videos/arcnet.io(7-sec).vtt"/>
</video>
<p>Some information about video</p>
</body>
</html>Beispiel für das HTML <video>-Tag mit dem Attribut controls:
Wie wird das HTML <video>-Tag verwendet?
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 220px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls playsinline>
<source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg" />
<source src="https://de.w3docs.com/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>
<p>Some information about video</p>
</body>
</html>TIP
Die Attribute controls, autoplay und loop sind boolesche Attribute und akzeptieren keine Werte. Wenn sie angegeben sind, sind sie standardmäßig aktiviert.
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| autoplay | autoplay | Gibt an, dass das Video automatisch startet, sobald es bereit ist. |
| controls | controls | Zeigt Steuerelemente an, die dem Benutzer die Kontrolle über die Videowiedergabe ermöglichen, einschließlich Lautstärke, Suchlauf und Pause/Wiedergabe fortsetzen. |
| height | pixels | Legt die Höhe des Videowiedergabeprogramms fest. |
| loop | loop | Gibt an, dass das Video nach jedem Ende erneut abgespielt wird. |
| muted | muted | Gibt an, dass das Video zunächst stummgeschaltet ist. |
| poster | URL | Legt ein Bild fest, das während des Downloads angezeigt wird, bis der Benutzer die Wiedergabetaste drückt. |
| preload | auto, metadata, none | Gibt dem Browser einen Hinweis darauf, welche Inhalte vor der Wiedergabe geladen werden sollen: <br> auto: Die gesamte Videodatei kann heruntergeladen werden. <br> metadata: Videometadaten (z. B. Länge) werden abgerufen. <br> none: Das Video sollte nicht vorgeladen werden. <br> Hinweis: Das Attribut wird ignoriert, wenn autoplay aktiviert ist. |
| src | URL | Legt die URL des eingebetteten Videos fest. Alternativ kann das <source>-Element verwendet werden, um das einzubettende Video anzugeben. |
| width | pixels | Legt die Breite des Players fest. |
Das <video>-Tag unterstützt die Globalen Attribute und die Ereignisattribute.
Praxis
Wofür kann das HTML <video>-Tag verwendet werden?