HTML <video> Tag

Definition und Verwendung

<video> Tag wird verwendet, um Videoinhalte in einem Dokument einzubinden, z.B. Filmclips oder andere Videostreams.

<video> Tag enthält eine oder mehrere mit verschiedenen Videquellen <source> Tag. Der Browser wählt den ersten unterstützten Source aus.

<video> und </video> Der Text zwischen den Tags wird nur angezeigt, wenn der Browser <video> im Browser des Elements angezeigt.

HTML unterstützt drei Videoformate: MP4, WebM und OGG.

Browser MP4 WebM Ogg
Edge Unterstützt Unterstützt Unterstützt
Chrome Unterstützt Unterstützt Unterstützt
Firefox Unterstützt Unterstützt Unterstützt
Safari Unterstützt Unterstützt Nicht unterstützt
Opera Unterstützt Unterstützt Unterstützt

Weitere Informationen:

HTML DOM Referenzhandbuch:HTML Audio/Video DOM Referenzhandbuch

Beispiel

Video abspielen:

<video width="640" height="360" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  Ihr Browser unterstützt das Video-Tag nicht.
</video>

Probieren Sie es selbst aus

Hinweise und Anmerkungen

Hinweis:Für Audiodateien siehe <audio>-Tag.

Optionale Eigenschaft

Eigenschaft Wert Beschreibung
autoplay autoplay Bestimmen Sie, dass das Video sofort nach der Bereitschaft zum Abspielen gestartet wird.
controls controls Bestimmen Sie die anzuzeigenden Videokontrollen (z.B. Play/Pause-Taste usw.).
height Pixel Einstellen der Höhe des Videoplayer.
loop loop Bestimmen Sie, dass das Video nach jeder Endung neu beginnt.
muted muted Bestimmen Sie, ob die Audioausgabe des Videos stumm sein soll.
poster URL Bestimmen Sie das Bild, das während des Herunterladens des Videos oder vor dem Klicken auf den Play-Button angezeigt wird.
preload
  • auto
  • metadata
  • none
 Bestimmen Sie, ob das Video beim Laden der Seite geladen oder wie geladen werden soll.
src URL Bestimmen Sie die URL der Videodatei.
width Pixel Einstellen der Breite des Videoplayer.

Globale Attribute

<video> Der Tag unterstützt auch Globale Attribute in HTML.

Ereignisattribute

<video> Der Tag unterstützt auch Ereignisattribute in HTML.

Standardmäßige CSS-Einstellungen

Keine

Browser-Unterstützung

Die Zahlen in der Tabelle geben die Versionsnummer des ersten Browsers an, der diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.1 11.5