<video>

Übersicht

Das HTML <video> Element wird verwendet, um Videos einzubetten. Es kann verschiedene Quellen für Videos enthalten, die im src Attribut oder im <source> Element repräsentiert werden. Der Webbrowser wählt dann die für ihn passende Quelle aus.

Eine Liste der unterstützten Formate ist unter Unterstützte Formate der <audio> und <video> Elemente zu finden.

Anwendungscontext

Inhaltskategorien Fließender Inhalt, Formulierung, eingebetteter Inhalt. Wenn es ein controls Attribut hat: interaktiver Inhalt und konkreter Inhalt.
Erlaubter Inhalt Wenn das Element ein src Attribut hat: kein oder mehrere <track> Elemente, gefolgt von transparentem Inhalt, der keine Medienelemente des Typs <audio> oder <video> enthält.
Sonst: kein oder mehrere <source> Elemente, gefolgt von keinem oder mehreren <track> Elementen, gefolgt von transparentem Inhalt, der keine Medienelemente des Typs <audio> oder <video> enthält.
Tag Wegfall Keine, sowohl das Anfangs- als auch das End-Tag sind erforderlich.
Erlaubte Elternelemente Jedes Element, das eingebetteten Inhalt akzeptiert.
DOM interface HTMLVideoElement

Attribute

Wie jedes andere HTML Element unterstützt diese Element die globalen Attribute.

autoplay
Ein Boolean Attribut; wenn es gesetzt ist, beginnt das Video automatisch abzuspielen sobald es nicht mehr stoppen muss um weitere Daten zu laden.
autobuffer
Ein Boolean Attribut; wenn es gesetzt ist, beginnt das Video automatisch mit dem Buffering, sogar wenn die automatische Wiedergabe nicht aktiv ist. Diese Attribut sollte verwendet werden, wenn angenommen werden kann, dass der Benutzer das Video abspielen wird (zum Beispiel wenn der Benutzer die Seite aufruft, um das Video abzuspielen und nicht weil es auf der Seite anderen Inhalt gibt und auch ein eingebettetes Video). Das Video wird solange gepuffert, bis der Mediencache voll ist.
Implementierungshinweis: obwohl es ein Teil der frühen Entwürfe der HTML5 Spezifikation ist, wurde das autobuffer Attribut aus späteren Veröffentlichungen entfernt. Es wurde aus Gecko 2.0 und anderen Webbrowsern entfernt, wobei es von manchen gar nicht erst implementiert wurde. Die Spezifikation definiert ein neues Attribut preload mit einer anderen Syntax, um das autobuffer Attribut zu ersetzen. Bug 548523
buffered
Ein Attribut, das aus dem die bereits gepufferten Zeitspannen des Mediums gelesen werden können. Dieses Attribut enthält ein TimeRanges Objekt.
controls
Wenn dieses Attribut gesetzt ist,  blendet Gecko Steuerelemente für die Wiedergabe ein. Darunter befinden sich Lautstärke, Spulen und pausieren/fortsetzen der Wiedergabe.
crossorigin
Dieses aufgezählte Attribut gibt an, ob das Laden des dazugehörigen Bildes mit CORS erfolgen muss. CORS-enabled Ressourcen können im <canvas> Element ohne Qualitätsabfall verwendet werden. Die erlaubten Werte sind:
anonymous
Ein cross-origin Request (z. B. mit Origin: HTTP Header) wird ausgeführt aber es werden keine Credentials gesendet (z. B. kein Cookie, kein X.509 Zertifikat und keine HTTP Basic authentication werden gesendet). Wenn der Server keine Credentials an die origin site gibt (wenn der Access-Control-Allow-Origin: HTTP Header nicht gesetzt ist), wird das Bild schlecht und die Verwendung ist eingeschränkt.
use-credentials
Ein cross-origin Request (i.e. with Origin: HTTP header) wird ausgeführt und Credentials werden gesendet (z.B. ein Cookie, ein Zertifikat und eine HTTP Basic authentication wird ausgeführt). Wenn der Server keine Credentials an die origin site gibt (über den Access-Control-Allow-Credentials: HTTP Header), wird das Bild schlecht sein und die Verwendung eingeschränkt.
Wenn dieses Attribute nicht verwendet wir, wird die Ressource ohne einen CORS Request geladen (z. B. ohne den Origin: HTTP Header zu senden), preventing its non-tainted used in <canvas> elements. Bei einem ungültigen Wert wird das Verhalten von anonymous übernommen. Weitere Informationen sind unter CORS settings attributes zu finden.
height
Die Höhe des Wiedergabebereichs in CSS Pixel.
loop
Ein Boolean-Attribut; wenn es gesetzt ist, wird das Video nach dem Ende zurück an den Anfang gespult
muted
Ein Boolean-Attribut das eine Standardeinstellung für den Ton im Video angibt. Wenn es gesetzt ist, ist der Ton initial auf stumm geschaltet. Der Standardwert ist false. Das bedeutet, dass der Ton mit dem Video abgespielt wird
played
Ein TimeRanges Objekt das die abgespielten Abschnitte des Videos angibt.
preload
Dieses aufgezählte Attribute ist ein Hinweis vom Autor darüber, wie laut ihm die möglichst beste User Experience erreicht werden kann. Es kann einen der folgenden Werte enthalten:
  • none: der Autor meint, dass der Benutzer das Video nicht anfragen wird, oder dass der Server seinen Datenverkehr minimieren will; das Video sollte nicht gecached werden
  • metadata: der Autor meint, dass der Laden der Metadaten (z.B. Länge) vertretbar ist, auch wenn der Benutzer das Video nicht anfragen wird
  • auto: die Bedürfnisse des Benutzers haben Priorität; bei Bedarf kann das gesamte Video heruntergeladen werden, auch wenn es der Benutzer womöglich nicht vollständig ansieht
  • ein leerer String: ein Synonym für den Wert auto

Wenn diese Attribut nicht gesetzt ist, wird der Standardwert vom Webbrowser verwendet. Jeder Webbrowser kann seinen eigenen Standardwert auswählen, obwohl die Spezifikation den Wert metadata empfiehlt.

Verwendungshinweise:
  • Das autoplay-Attribut hat Vorrang gegenüber diesem Attribute, denn wenn das Video automatisch abgespielt werden soll, muss der Webbrowser es laden. Das Setzen der Attribute autoplay und preload wird von der Spezifikation erlaubt.
  • Der Webbrowser wird von der Spezifikation nicht gezwungen den Wert zu befolgen. Es ist ein reiner Hinweis.
poster
Die URL eines Vorschaubildes, das dargestellt wird bis der Benutzer das Video abspielt oder spult. Wenn diese Attribut nicht angegeben wird, wird nichts dargestellt bis der erste Frame des Videos verfügbar ist. Der erste Frame wird dann als Vorschaubild dargestellt.
src
Die URL des Videos, das eingebettet werden soll. Diese Attribut ist optional. Stattdessen kann das <source>-Element innerhalb des video-Blocks für die Angabe des einzubettenden Videos verwendet werden.
width
Die Breite des Wiedergabebereichs in CSS Pixel.

Events

Das <video>-Element kann verschiedene Events auslösen.

Beispiele

<!-- Simple video example -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  Sorry, your browser doesn't support embedded videos, 
  but don't worry, you can <a href="videofile.ogg">download it</a>
  and watch it with your favorite video player!
</video>

<!-- Video with subtitles -->
<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>

Das erste Beispiel spielt ein Video ab, sobald genügend Frames geladen worden sind, damit es keine Unterbrechungen beim Abspielen gibt. Das Bild "posterimage.jpg" wird dargestellt, bis das Video abgespielt wird.

Das zweite Beispiel erlaubt dem Benutzer die Auswahl eines Untertitels.

Serverunterstützung

Wenn der MIME Type für das Video auf dem Server nicht korrekt konfiguriert ist, wird das Video nicht angezeigt oder eine graue Box mit einem X, falls JavaScript aktiviert ist.

Wenn die Videos als Ogg Theora bereitgestellt werden sollen, kann beim Apache Web Server die Dateiendung der Videos (".ogm", ".ogv", oder ".ogg" sind die gängigsten) zum MIME Type "video/ogg" über die "mime.types" Datei in "/etc/apache" oder über die "AddType" Konfigurationsdirektive in httpd.conf abgegeben werden.

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

Wenn die Videos als WebM bereitgestellt werden sollen, kann beim Apache Web Server die Dateiendung der Videos (".webm" ist die gängigste) zum MIME Type "video/webm" über die "mime.types" Datei in "/etc/apache" oder über die "AddType" Konfigurationsdirektive in httpd.conf abgegeben werden.

AddType video/webm .webm

Ihr Web Host bietet möglicherweise eine einfache Schnittstellun zur Konfiguration der MIME Typen, bis es ein globales Update gibt.

DOM Interface

Dieses Element implementiert das HTMLVideoElement Interface.

Webbrowserkompatibilität

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 3.0 3.5 (1.9.1) 9.0 10.5 3.1
autoplay attribute 3.0 3.5 (1.9.1) 9.0 10.5 3.1
buffered attribute ? 4.0 (2.0) ? Yes ?
controls attribute 3.0 3.5 (1.9.1) 9.0 10.5 3.1
crossorigin attribue ? 12.0 (12.0) ? ? ?
loop attribute 3.0 11.0 (11.0) 9.0 10.5 3.1
muted attribute ? 11.0 (11.0) ? Yes ?
played property ? 15.0 (15.0) ? Yes ?
poster attribute 3.0 3.6 (1.9.2) 9.0 10.5 3.1
preload attribute 3.0 4.0 (2.0) 9.0 Yes 3.1
src attribute 3.0 3.5 (1.9.1) 9.0 10.5 3.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? 1.0 (1.0) ? ? ?
autoplay attribute ? 1.0 (1.0) ? ? iOS 6.0 only
buffered attribute ? 4.0 (2.0) ? ? ?
controls attribute ? 1.0 (1.0) ? ? ?
loop attribute ? 11.0 (11.0) ? ? ?
muted attribute ? 11.0 (11.0) ? ? ?
played property ? 15.0 (15.0) ? ? ?
poster attribute ? 1.0 (1.0) ? ? ?
preload attribute ? 4.0 (2.0) ? ? ?
src attribute ? 1.0 (1.0) ? ? ?
crossorigin attribute ? 12.0 (12.0) ? ? ?

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: Sebastianz, spiegelp
 Zuletzt aktualisiert von: Sebastianz,