HTML video / audio auf Webseiten

Video-Formate

Früher unterstützten die Browser unterschiedliche Video-Formate: Firefox stand auf OGV, Chrome spielt OGV, WebM und MP4 ab, Safari und Internet Explorer 9 spielen von Haus aus nur MP4-Video ab.

Das video-Tag vereinfacht den Umgang mit den unterschiedlichen Video-Formaten und -Codecs. Zwischen dem öffnenden und schließenden Video-Tag können alternative Formate des Videos eingesetzt werden. Das mag auf den ersten Blick aufwändig wirken, aber der Computer ist nicht mehr das Internet: Videos landen auf den unterschiedlichen Geräten mit unterschiedlich schnellen Internetverbindungen.

<video controls height="360" width="640">
   <source src="countdown.mp4" type="video/mp4" >
   <source src="countdown.webm" type="video/webm;codecs="vp8, vorbis" >
   <source src="countdown.ogg" type="video/ogg" >
   <p>Dieser Browser unterstützt das HTML-Video-Element nicht</p>
</video>

Das Video kann in mehreren Formaten vorliegen – eine zwei- oder sogar dreifache Transcodierung des Videos war in der Vergangenheit nichts Ungewöhnliches. Heute ist MP4 das Videoformat der Wahl: YouTube spielt MP4-Video, alle Browser zeigen MP4 ohne Plugin, Kameras und Handys nehmen MP4 auf.

Der Typ des Videos – z.B. type="video/mp4" oder type="video/webm" – sollte immer aufgeführt werden, denn sonst müsste der Browser alle Videos laden, um festzustellen, welches Video er abspielen kann.

Ein Video einzubinden ist mit dem HTML-video-Element so einfach geworden, dass Videos nicht mehr von externen Plattformen geladen werden müssen. Das kommt dem Datenschutz entgegen, denn die kommerziellen Video-Plattformen ziehen i.d.R. Informationen wie die IP-Adresse des Besuchers ab.

Media Queries: Video je nach Viewport-Größe

Für Webseiten ist die Umsetzung des Videos in unterschiedliche Formate und Codecs nicht mehr nötig. Stattdessen steht die Frage nach der Größe des Viewports im Vordergrund. Für Besucher, die mit mobilen Geräten unterwegs ist, brauchen wir allenfalls ein Video mit reduzierter Datenrate.

Media Queries boten für einige Jahre verschiedene Varianten des Videos und belieferten Geräte mit einem kleinen Viewport mit einer kleineren Version und Desktop-Monitore mit einer größeren Version.

<video controls> 
   <source src="clean-my-kitchen.mp4" type="video/mp4" media="all and (min-width:980px)">        // ~ 1MB   - 1280 x 780px
   <source src="clean-my-kitchen-small.mp4" type="video/mp4" media="all and (min-width:320px)">  // ~ 400KB – 711 x 400px
</video>

Das media-Attribut im source-Element des Video-Elements ist nicht mehr Teil der Spezifikation, der Validator spuckt einen Fehler aus.

Error: Attribute media not allowed on element source at this point.

Anders als PDF oder Bilder werden Videos nicht »am Stück im Ganzen« geladen, sondern nur so weit, wie es abgespielt wird, plus ein paar Sekunden im Voraus. Es kommt also auf die Zielgruppe an, in welchen Qualitäten das Video dem Besucher angeboten werden sollte.

CSS für responsives Video

Ganz gleich, ob das Video direkt mit dem video-Tag oder mit einem iframe-Element von youTube oder Vimeo eingesetzt wird: Sowohl das video-Tag als auch das iframe-Tag setzen auf statische Größenangaben.

Aber lassen wir width und height-Attribut des video-Tags unter den Tisch fallen, braucht das HTML-Video nur

video {
	width: 100%;
}

Video in einem iframe

Für ein Video à la youTube oder Vimeo in einem iframe reicht das nicht. Ohne height-Attribut im iframe-Tag wird ein iframe zwar 100% breit, aber seine Höhe wird nicht angepasst. Am Ende erscheint das Video entweder als Streifen oder als Briefmarke.

Das Video wird erst bei einem Klick auf das Vorschaubild geladen. Bis dahin werden keine Informationen an Vimeo weiter gegeben. Erst beim Abspielen des Videos kann Vimeo Cookies einsetzen.

Video starten bei / enden bei

Kein Problem: Eine Startzeit für das Video angeben oder nur einen Ausschnitt des Videos abspielen mit #t=start,end

<video controls src="countdown.mp4#t=4" style="width:100%"></video>

HTML Video – Attribute

Die meisten Attribute für das HTML video-Tag sind vom Typ »Boolean«. Die ausschweifende Schreibweise controls="controls" wie in XHTML wird nicht mehr benötigt, stattdessen reicht einfach "controls". Der Wert des Attributs muss nicht angegeben werden.

autoplay / autoplay

Das Video wird gestartet, sobald es geladen ist.
<video autoplay … > Aber Achtung! Die meisten Browser spielen das Video trotz autoplay nicht automatisch ab, sondern erst mit einem Klick auf den Play-Button oder wenn der Benutzer bereits mit der Seite interagiert hat – und nur ohne Ton.

controls/ controls

Die Steuerung des Video wird angezeigt (Play, Pause, Lautstärke, usw. ). Wenn das Attribut controls nicht gesetzt ist, wird das Video ohne Steuerung angezeigt.
<video controls … >

height/ Pixel

Höhe des Videos
<video height="400" … >

loop / loop

Das Video startet erneut, sobald es vollständig abgespielt wurde
<video loop … >

muted / muted

Ohne Ton
<video muted … >

poster/ URL

URL eines Bildes, das bis zum Start des Videos gezeigt wird
<video poster="start.jpg" … >

preload auto / metadata / none

Wie das Video geladen werden soll
<video preload="none" … > verhindert, dass der Browser Videodaten vorab – bevor der Nutzer auf Play klickt – lädt.

src / URL

Die URL der Video-Datei
<source src="extracting.mp4" type="video/mp4">

width / Pixel

Breite der Videodatei
<video width="720" … >

Mit <video playsinline> spielen iPhones ab iOS 10 Videos inline innerhalb der Webseite und wechseln nicht automatisch zum Fullscreen-Modus. playsinline wurde daraufhin in die HTML-Spezifikation aufgenommen und wird heute von allen Browsern auf mobilen den Geräten unterstützt.

Loading Lazy für HTML-Video?

Nein, loading=lazy ist nicht für Videos gemacht. Stattdessen reduzieren Attribute die Last beim Laden der Seite.

• preload="none"
• autoplay="false"

Ansonsten hilft der Intersection Observer – Javascript. Auch hier liegt wieder das Verhalten beim Laden von Videos zugrunde: Videos werden nicht komplett geladen, sondern nur ein kleiner Teilbereich, der gerade abgespielt wird, plus ein paar Sekunden im Voraus.

CSS für Video

Das video-Element nimmt alles hin, was CSS ihm antut: borders, transforms, …. Die Steuerelemente wie play, stop, mute, … sind allerdings den Browsern überlassen. Auch mit CSS gibt es kleine Möglichkeit, das Aussehen des Videoplayers zu ändern.

Wenn das Attribut controls nicht gesetzt wird, zeigen die Browser keine Steuerelemente. Dann können eigene Steuerelement mit Javascript und individueller Grafik den Videoplayer an die eigenen Vorstellungen anpassen.

Mankos des video-Tags

Dem video-Tag fehlen aber immer noch einige Funktionen:

• Fullscreen ist den Browsern überlassen und nicht im Standard verankert.
• Kein DRM
• Kein Streaming
• Kein SMIL (Synchronized Multimedia Integration Language)
• Keine Unterstützung für Playlisten

Auf der Habenseite : Videotracks.

HTML Audio in Webseiten

Das HTML audio-Tag folgt demselben Muster, mit dem auch Video in Webseiten abgespielt wird. Hier wird zuerst die Audio-Datei im M4A-Format angeboten, und wenn der Browser das Format nicht unterstützt, gibt's das gängige MP3. Das Attribut controls zeigt die Steuerelemente zum Abspielen der Audiodatei.

<audio controls>
   <source src="/html/video/SIMPLE2.m4a" type="audio/x-aac">
   <source src="/html/video/SIMPLE2.mp3" type="audio/mpeg">
</audio>

Genauso wie bei Video mit mehreren source-Elementen: Die Reihenfolge spielt eine Rolle. Der Browser nimmt das erste Format, das er versteht.

MP3 ist nach wie vor der De-facto-Standard für Audio im Web. Es gibt aber auch gute Gründe, ebenfalls M4A (AAC), OGG, oder sogar Opus anzubieten – je nach Zielgruppe, Endgerät und Qualitätsanspruch.

Audio mit eigenen Steuerelementen

Wird das Attribut controls für HTML-Audio nicht gesetzt, zeigen die Browser das audio-Objekt nicht an. Dann kann ein simples Javascript eine eigene Audio-Steuerung nachbauen:

<audio id="loop">
   <source src="/html/video/SIMPLE2.m4a" type="audio/x-aac">
   <source src="/html/video/SIMPLE2.mp3" type="audio/mpeg">
</audio>

<script>
document.querySelector('#playaudio').onclick = function () {
   audio.play(); 
}

document.querySelector('#pauseaudio').onclick = function () {
   audio.pause(); 
}

document.querySelector('#rewindaudio').onclick = function () {
   audio.currentTime = 0;
}
</script>

Dieses Schema wirkt auch bei Videos – wenn anstelle der vorgegebenen Steuerelemente – Play, Pause, Rewind – des Videos eine eigene Steuerung verwendet werden soll.