Video-Formate
Am Anfang von HTML5 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.
<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 HTML5 Video nicht</p> </video>
Der Typ des Videos – z.B. type="video/mp4" oder type="video/ogg" – sollte immer aufgeführt werden, denn sonst müsste der Browser alle Videos laden, um festzustellen, welches Video er abspielen kann.
Heute spielen alle modernen Browser das MP4-Format ab und ein einziges video-Tag reicht im Grunde genommen:
<video controls src="countdown.mp4"></video>
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 ein Video mit reduzierter Datenrate.
Media Queries bieten verschiedene Varianten des Videos und beliefern Geräte mit einem kleinen Viewport mit einer kleineren Version und Desktop-Monitore mit einer größeren Version.
<video controls> <source src="video-large.mp4" type="video/mp4" media="all and (min-width:680px)"> <source src="video-small.mp4" type="video/mp4" media="all and (min-width:320px)"> </video>
Genauso wie beim source-Tag des picture-Elements nimmt sich der Browser das erste source-Element, dessen media-Attribut zutrifft – also werden bei Media Queries mit min-width die source-Optionen mit den größeren Auflösungen zuerst aufgeführt.
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.
<video width="720" height="480" … > … </video> <iframe width="720" height="480" … > … </iframe>
Mit zwei Zeilen wird das Video im video-Tag responsive.
video {
width: 100% !IMPORTANT;
height: auto !IMPORTANT;
}
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.
countdown from U. Haessler on Vimeo.
Formate (Codecs) für Video
Das Video kann in mehreren Formaten vorliegen – eine zwei- oder sogar dreifache Transcodierung des Videos war in der Vergangenheit nichts Ungewöhnliches. Die hier angeführten Formate sind MP4 für IE / EDGE und Safari und OGG für Firefox und Google Chrome (der dann aber doch noch immer MP4 den Vorzug gibt).
Video MP4
Video OGG
<video controls width="854" poster="countdown.png"> <source src="countdown.mp4" type="video/mp4"> <source src="countdown.ogg" type="video/ogg"> </video>
Aber wie bereits oben erwähnt: Heute reicht das mp4-Video-Format für Video auf Webseiten.
HTML5 Video – Attribute
Die meisten Attribute für das HTML video-Tag sind vom Typ Boolean. Die ausschweifende Schreibweise autoplay="autoplay" wie in XHTML wird nicht mehr benötigt, stattdessen reicht einfach "autoplay". In HTML5 kann direkt der Wert des Attributs angegeben werden.
- autoplay / autoplay
- Das Video wird gestartet, sobald es geladen ist.
<video autoplay … >
Aber Achtung! Auf den mobilen Geräten wird das Video trotz autoplay nicht automatisch abgespielt. Wenn das Video direkt starten würde, verbraucht es kostbares Datenvolumen ohne Erlaubnis des Benutzers. Ab iOS 10 hat Webkit die autoplay-Regelung aufgeweicht: WebKit’s New policies for video
Safari macOS High Sierra (Juni 2017) startet auch auf dem Desktop das Video mit autoplay nicht mehr automatisch, sondern erst mit einem Klick auf den Play-Button. - 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" … > - codeload/ auto
metadata
none - Wie das Video geladen werden soll
<video codeload="auto" … > - 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.
CSS für Video
Das video-Element nimmt alles hin, was CSS ihm antut: borders, transforms, Die Steuerelemente wie play, stop, mute, … sind 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 eigener 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
- Die Metadaten zum Video sind überaus dürftig ausgefallen. Wie sollen die Suchmaschinen Video-Inhalte finden?
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>
Audio mit eigenen Steuerelementen
Wird das Attribut controls für HTML5 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.