Analog zu Audio-Ressourcen soll das mit HTML5 neu eingeführte video-Element ermöglichen, Videos direkt im Browser abspielen zu lassen, ohne Plugin und ohne Flash.

Ziel des video-Elements ist, dass alle Browser bestimmte Video-Formate ohne zusätzliche Software abspielen können, also direkt in der Browser-Software implementieren. Die Probleme beim video-Element sind dabei die gleichen wie beim audio-Element. Geht es beim audio-Element um MP3 vs. OGG, so konkurrieren beim video-Element MPEG-4 und OGG-Video (OGV). Die Situation ist die gleiche. Der Codec H.264, den MPEG-4 verwendet, ist durch Software-Patente geschützt. Der Theora-Codec für das OGG-Format ist hingegen patentfrei. Während Microsoft, Google und Apple H.264 wegen dessen höherer Performanz favorisieren, weigern sich Mozilla Firefox und Opera, diesen Codec in ihren Browsern zu implementieren und setzen stattdessen auf den OGG-Container mit Theora-Codec. Das Problem lässt sich in HTML5 immerhin dadurch lösen, indem man beide Formate vorhält und anbietet. Als Dauerlösung ist dies jedoch nicht befriedigend.

Der MS Internet Explorer kennt das video-Element bis einschließlich Version 8.0 überhaupt nicht.

Beispiel

<h1>Autoscooter</h1>
<video src="autoscooter.mp4" width="640" height="480" 
       controls preload="metadata" poster="autoscooter.jpg"> 
   <source src="autoscooter.ogv" type="video/ogg"></source> 
</video>

Solange noch keine Einigkeit über den oder die Codecs herrscht, die jeder HTML5-fähige Browser verbindlich implementieren sollte, ist es allerdings korrekter, das obige Beispiel in der folgenden Form zu notieren:

<video src="autoscooter.mp4" width="640" height="480" 
       controls preload="metadata" poster="autoscooter.jpg"> 
   <source src="autoscooter.ogv" type="video/ogg"></source> 
   <source src="autoscooter.mp4" type="video/mp4"></source> 
</video>

Erläuterung

Die Video-Ressource wird durch <video>…</video> markiert. Genau wie beim audio-Element kann das video-Element als Elementinhalt ein oder mehrere source-Elemente in Form von Standalone-Tags <source> enthalten. Im einleitenden <video>-Tag geben Sie beim Attribut src die eigentlich gewünschte und bevorzugte Video-Datei an, die abgespielt werden soll. In dem oder den source-Elementen, die ebenfalls je ein src-Attribut haben, notieren Sie Video-Dateien mit gleichem Inhalt, aber anderen Video-Formaten. Das einleitende <video>-Tag muss nicht zwangsläufig ein src-Attribut enthalten. Sie können auch alle Alternativen wie oben in der derzeit empfohlenen Notationsform gezeigt in die <source>-Tags verlagern.

Bei den src-Attributen gelten die Regeln für Referenzierung in HTML.

Im einleitenden <video>-Tag sind die folgenden gleichen Attribute möglich wie bei <audio>:

Wenn Sie das Standalone-Attribut controls angeben, zeigt der Browser einen sichtbaren Player mit Grundfunktionen wie Pause/Weiterspielen, Lautstärkeregelung und Wiedergabe-Zeitanzeige an. Lassen Sie das controls-Attribut dagegen weg, wird das Video ohne Player angezeigt. Der Anwender hat in diesem Fall keine Kontrollmöglichkeiten in Bezug auf die Wiedergabe.
Wenn Sie das Standalone-Attribut autoplay angeben, beginnt der Browser sofort beim Laden der Seite mit der Wiedergabe des Videos. Wenn Sie kein Attribut controls notieren, also keinen sichtbaren Player anzeigen wollen, und nur mit HTML, nicht mit JavaScript arbeiten, müssen Sie das Attribut autoplay unbedingt notieren. Andernfalls wird das Video nicht abgespielt, und der Anwender kann den Abspielvorgang auch nicht starten.
Wenn Sie das Standalone-Attribut loop angeben, wird das Video immer wieder von neuem abgespielt, wenn es zu Ende ist.
Mit dem Attribut mediagroup können Sie mehrere Video- oder Audio-Ressourcen einer Webseite als Gruppe definieren. Weisen Sie einfach allen gewünschten Video- oder Audo-Ressourcen den gleichen, selbst vergebenen Namen zu. Bei der Namensvergabe gelten die gleichen Regeln wie etwa bei Ankernamen. Er darf keine Leerzeichen enthalten. Beschränken Sie sich auf lateinische Buchstaben, arabische Ziffern sowie den Unterstrich (_). Das erste Zeichen des Namens sollte ein Buchstabe sein. Damit sind die Namen kompatibel für den JavaScript-Zugriff. Groß- und Kleinschreibung werden unterschieden. Gedacht ist das mediagroup-Attribut, wenn beispielsweise ein video-Element und mehrere audio-Elemente angeboten werden, wobei das video-Element die Original-Tonspur enthält, etwa eines Spielfilms, und die audio-Elemente Synchron-Tonspuren zum Film. Ein Browser, der das Attribut kennt, wird Ereignisse wie Start, Pause und Stop auf alle gruppierten Elemente gleichzeitig anwenden und darauf achten, dass der jeweils aktuelle Wiedergabepunkt auf der Zeitlinie bei allen gruppierten Elementen stets identisch ist. Für ein Umschalten etwa zwischen aktiven Tonspuren zu einem Film mit dieser Technik ist JavaScript erforderlich.
Mit dem Standalone-Attribut muted (unterdrückt) können Sie bestimmen, dass die Audio-Wiedergabe eines video- oder audio-Elements zu Beginn ausgeschaltet ist. Der Benutzer muss den Ton explizit einschalten, z.B. über eine entsprechende Funktion im angezeigten Player. Das HTML-Attribut ist nur als statischer Defaultwert gedacht, nicht für dynamisches Scripting. Es gibt jedoch ein gleichnamiges Objektattribut muted (mit true oder false als Wert), das Sie als DOM-Attribut auf video- und audio-Elemente anwenden können, um mit Hilfe von JavaScript-Steuerung den Wiedergabeton ein- oder auszuschalten. Vor allem im Zusammenhang mit dem mediagroup-Attribut ist diese Möglichkeit beim Scripting wichtig. Denn es soll ja etwa bei einem Film mit mehreren alternativen Tonspuren immer nur eine aktiv ausgegeben werden.
Mit dem Attribut preload können Sie ein Wunschverhalten beim Browser anmelden, nämlich ob und wie ein Browser ein Video oder einen Audio-Track beim Laden der Seite bereits zu laden beginnen soll, wenn Sie nicht das Attribut autoplay verwenden. Preload bedeutet, dass die Ressource oder Daten zur Ressource bereits geladen werden, bevor der Anwender den Abspielvorgang explizit gestartet hat. Ein bestimmtes Verhalten erzwingen können Sie mit diesem Attribut nicht, da HTML5 die letztliche Hoheit darüber dem Browser zugesteht. Das hat vielfältige Gründe, z.B. weil viele Anwender volumenabhängige Internet-Tarife haben und Übertragungen datenintensiver, nicht explizit angeforderter Inhalte nicht wünschen. Das Vorladen (Preload) ist dann sinnvoll, wenn ein Video- oder Audio-Inhalt das zentrale Element einer Webseite ist und die Webseite nur wegen dieses Video- oder Audio-Inhalts aufgerufen wird. Handelt es sich dagegen um eine Seite mit Informationen, die unter anderem ein Video enthält, ist es in jedem Fall besser, das Video nicht vorzuladen. Wenn Sie das preload-Attribut nicht angeben, bleibt es also dem Browser überlassen, wie er verfährt. Mit der Angabe preload="none" können Sie das Vorladen explizit verhindern. Mit preload="metadata" werden nur Daten über die Ressource vorgeladen, also Daten wie Spieldauer, Auflösung, Qualität, usw., nicht jedoch die Ressource selbst. Mit preload="auto" melden Sie den vorsichtigen Wunsch an, die Ressource wenn es geht bereits vorzuladen. Ein Default-Wert fehlt bei diesem Attribut bewusst. Am wahrscheinlichsten ist, dass die meisten Browser als Default das verwenden, was durch preload="metadata" ausgedrückt wird.

Darüber hinaus stehen bei <video> noch weitere Attribute zur Verfügung:

Mit dem Attribut poster können Sie eine Grafik referenzieren, die angezeigt wird, solange kein Video abgespielt wird. Sinnvollerweise enthält die Poster-Grafik einen aussagekräftigen Screenshot aus dem Video. Alle üblichen Web-Grafikformate wie JPEG, PNG oder GIF sind erlaubt. Für die Wertzuweisung an das poster-Attribut gelten die Regeln für Referenzierung.
Mit den Attributen width und height bestimmten Sie die Breite und Höhe der Videoanzeige in Pixeln. Geben Sie bei diesen Attributen möglichst die tatsächliche Breite und Höhe des Videos an, um Verzerrungen zu vermeiden. Wie bei anderen Bereichen für Medien unterstützen Sie durch die Angabe von width und height den Browser beim Bildschirmaufbau, während er die Webseite lädt.

Für das source-Element, das innerhalb von <video>…</video> für alternative Video-Formate notiert werden kann, gibt es zwei weitere Attribute: type und media.

Mit type können Sie den MimeType der Video-Datei angeben. Im Zusammenhang mit Videos kommen jene MimeTypen in Frage, die mit video/ beginnen, also z.B. video/mpeg für herkömmliche MPEG-Dateien, video/quicktime für MOV-Dateien oder video/x-msvideo für AVI-Dateien. Wenn nötig, sollten Sie außerdem eine Codec-Angabe innerhalb der type-Angabe notieren. Eine solche Erweiterung der MimeType-Angabe wird im RFC 4281 beschrieben.

Die HTML5-Spezifikation listet im Zusammenhang mit Video-Codecs folgende typische Angaben für das type-Attribut auf:

type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'
type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'
type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'
type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'
type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'
type='video/3gpp; codecs="mp4v.20.8, samr"'
type='video/ogg; codecs="theora, vorbis"'
type='video/ogg; codecs="theora, speex"'
type='video/ogg; codecs="dirac, vorbis"'
type='video/x-matroska; codecs="theora, vorbis"'

Verwenden Sie diese Angaben jedoch nur, wenn Sie genau wissen, welche Codecs Ihre Videos im Detail verwenden.

Mit dem media-Attribut können Sie angeben, für welche Medientypen die Video-Ressource geeignet ist. Die Voreinstellung ist media="all", also alle Medientypen. Beim media-Attribut wird als Wert eine gültige Medienabfrage erwartet.

Weitere Hinweise

Die Attribute type und media gibt es nur beim source-Element, nicht beim video-Element. Der Grund ist, dass beim video-Element beim src-Attribut nur Dateien angegeben werden sollten, die der Browser in jedem Fall selbst erkennt. Greift er dagegen auf eine im alternativen source-Element angegebene Datei zurück, helfen die zusätzlichen Attribute gegebenenfalls bei der Wahl eines externen Abspielprogramms.

Wie der im Browser angezeigte Video-Player genau aussieht, ist nicht festgelegt.

Es ist möglich, CSS-Eigenschaften auf das video-Element anzuwenden, doch damit ist das Aussehen des Players nur bedingt beeinflussbar. Um eigene Player zu kreieren, müssen Sie auf Scripting zurückgreifen.

Die Browser, die das video-Element kennen, interpretieren nicht unbedingt alle Attribute davon. Das gilt besonders für das preload-Attribut, das in der HTML5-Spezifikation zunächst als autobuffer-Attribut ausgewiesen wurde.

Wenn Sie XHTML-konform arbeiten, notieren Sie source-Elemente in der Form <source … /> und die Standalone-Attribute durch Zuweisung des Attributnamens als Wert, also autoplay="autoplay", controls="controls" und loop="loop".

Referenzinformationen

(Browser-Angaben mit weiter oben erwähnten Einschränkungen)

Eingebettete Audio-Ressourcen « | » Zusätzliche Spuren (Tracks)

Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.