CSS, HTML und Javascript mit {stil}

HTML video / audio

Video-Tag und Audio-Tag

HTML5 video bzw. audio binden eine oder mehrere Varianten eines Videos bzw. einer Audio-Datei in die Webseite ein.

Das mag auf den ersten Blick verschwenderisch und aufwändig wirken. Aber der Computer ist nicht mehr das Internet: Videos landen heute auf einer Vielzahl von Geräten mit unterschiedlich schnellen Internetverbindungen.

Die Browser unterstützen unterschiedliche Video-Formate: Firefox und Chrome spielen OGV, WebM und MP4, Safari und Internet Explorer 9 spielen von Haus aus nur MP4-Video ab. Firefox spielt in den neueren Version MP4 ebenfalls ab (Windows 7 ab Version 21.). Für den Besucher, der mit dem Handy unterwegs ist, brauchen wir ein Video mit reduzierter Datenrate.

Das video-Tag in HTML5 vereinfacht den Umgang mit den unterschiedlichen Video-Formaten und -Codecs. Zwischen dem öffnenden und schließenden Video-Tag können alternative Formate eines Videos eingesetzt werden, z.B. MP4 und OGG.

<video controls height="360" width="640">
<source src="countdown.m4v" type="video/mp4" />
<source src="countdown.mp4" type="video/mp4" />
<source src="countdown.ogg" type="video/ogg" />
<p>Dieser Browser unterstützt HTML5 Video nicht</p>
</video>

Responsive Video und Media Queries

Heute können alle modernen Browser das MP4-Format für Videos abspielen und die Frage nach der Größe des Viewports steht im Vordergrund.

Mit Media Queries läßt sich die Größe des Viewports als Kriterium für verschiedene Varianten des Videos einsetzen.

<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.

Formate (Codecs) für Video

Das Video kann in mehreren Formaten vorliegen – eine zwei- oder sogar dreifache Transcodierung des Videos ist nichts Ungewöhnliches. Die hier angeführten Formate sind OGG für Firefox und Google Chrome (der dann aber doch noch immer MP4 den Vorzug gibt), MP4 für Internet Explorer 9 und Safari. M4V ist ein Format für iPad und iPhone.

Video MP4

Video OGG

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. In HTML5 kann direkt der Wert des Attributs angegeben werden.

Attribut / WertBeschreibung
autoplay / autoplayDas Video wird gestartet, sobald es geladen ist.
<video autoplay … >
controls/ controlsDie 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/ PixelHöhe des Videos
<video height="400" … >
loop / loopDas Video startet erneut, sobald es vollständig abgespielt wurde
<video loop … >
muted / mutedOhne Ton
<video muted … >
poster/ URLURL 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="auto" … >
src / URLDie URL der Video-Datei
<source src="extracting.mp4" type="video/mp4" />
width / PixelBreite der Videodatei
<video width="720" … >

Welches Videoformat für welchen Browser? Nimm Drei …

Der Browser wählt das passende Videoformat unter den angegebenen Alternativen.

Die Developer-Tools der Browser zeigen, welches Videoformat sich der Browser herauspickt. Z.B. mit Chrome: Anzeigen ⇒ Entwickler ⇒ Entwicklertools

Firefox Informationen zum abgespielten Video
Abgespieltes Video in Firefox im Menü ExtrasSeiteninformationen

Videoplayer stylen

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?

HTML5 Audio in Webseiten

Das HTML5 audio-Tag folgt demselben Muster, mit dem Video in Webseiten abgespielt wird.

<audio controls id="myaudio" controls>
   <source src="media/song.m4a" type="audio/x-aac" />
   <source src="media/song.mp3" type="audio/mpeg" />
   <source src="media/song.ogg" type="audio/ogg" />
   <p>Dieser Browser unterstützt HTML5 audio nicht</p>
</audio>

HTML5 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="loop-02.m4a" type="audio/x-aac" />
   <source src="loop-02.mp3" type="audio/mpeg" />
   <source src="loop-02.ogg" type="audio/ogg" />
<p>Dieser Browser unterstützt HTML5 audio nicht</p>
</audio>

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

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

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