Ü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 Attributpreload
mit einer anderen Syntax, um dasautobuffer
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 derAccess-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 denAccess-Control-Allow-Credentials:
HTTP Header), wird das Bild schlecht sein und die Verwendung eingeschränkt.
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 Attributeautoplay
undpreload
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
- Media formats supported by the audio and video elements
<audio>
- Using HTML5 audio and video
- Manipulating video using canvas
nsIDOMHTMLMediaElement
- TinyVid - Beispiele zur Verwendung von ogg Dateien in HTML5.
- The
video
element (HTML5 Spezifikation) - Configuring servers for Ogg media
- The state of HTML5 video