14.4 Audiovisuelle Elemente 
Bewegte Bilder und Ton können noch weitere Sinne ansprechen als statische Bilder und reiner Text und so noch aufmerksamkeitsstärker sein, weitere Informationen vermitteln und vor allem emotionaler wirken.
14.4.1 Das HTML5-Videoelement
Dank der immer leistungsstärkeren Internetverbindungen und neuer Techniken ist es einfacher geworden, (hochauflösende) Videos in Webseiten einzubinden. Dies geht inzwischen sogar so weit, dass Videos auch schon browserformatfüllend eingesetzt werden. War es bis vor wenigen Jahren noch Flash vorbehalten, Videos und Sound in Webseiten verfügbar zu machen, so sind Webdesigner und Anwender heute nicht mehr auf das Flash-Plug-in angewiesen. Flash wurde zwar gerne für Animationen und multimediale Inhalte und Effekte eingesetzt, aber die Notwendigkeit eines Plug-ins, die Inkompatibilität mit einigen mobilen Endgeräten und die – zumindest teilweise – Unzugänglichkeit machen den Verzicht auf Flash vertret- und nachvollziehbar.
Abbildung 14.29 Zwischen vielen Bildern beginnt ganz dezent ein Video beim Scrollen, angenehm zurückhaltend und persönlich umgesetzt (martinasperl.at).
HTML5 bietet eine Möglichkeit, Videos unkompliziert ohne zusätzliche Browser-Plug-ins einzusetzen. Hier der Quellcode dazu:
<video height="480" width="640">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogv" type="video/ogg" />
<p>Dieser Browser unterstützt das HTML5-Videoelement leider nicht.</p>
</video>
Listing 14.12 Videoeinbindung mit HTML5
Browserkompatibilität unterschiedlicher Video- und Audioformate
Eine detaillierte Übersicht über die Browserkompatibilität mit den unterschiedlichen Video- und Audioformaten finden Sie unter developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats.
Die Browser unterstützen unterschiedliche Videoformate, sodass mehrere Varianten des Videos eingebunden werden sollten. Die Browser suchen sich dann die für sie passenden aus. Im video-Element lassen sich verschiedene Angaben vornehmen – Sie können z. B. die Kontrollelemente ein- oder ausblenden, das Video automatisch starten lassen, es loopen oder die Ladeeigenschaften festlegen:
|
Attribut |
Beschreibung |
Beispiel |
|---|---|---|
|
src |
URL der Videodatei |
<source src="film.mp4" |
|
autoplay |
Die Wiedergabe startet automatisch, nachdem ausreichend Inhalt geladen wurde. |
<video autoplay ... > |
|
controls |
Die Steuerelemente (Play, Pause, Stopp, Lautstärke etc.) werden angezeigt. |
<video controls ... > |
|
loop |
Das Video wird wiederholt, sobald es fertig abgespielt wurde. |
<video loop ... > |
|
height |
Höhe des Videoplayers in Pixeln |
<video height="320" ... > |
|
width |
Breite des Videoplayers in Pixeln |
<video width="480" ... > |
|
preload |
Angabe, wie das Video geladen werden soll: auto – Das komplette Video |
<video preload="auto" ... > |
|
poster |
Bild-URL, die angezeigt wird, bis das Video startet bzw. geladen ist |
<video poster="start.jpg" |
|
muted |
Stellt den Videoton aus. |
<video muted ... > |
Tabelle 14.3 Überblick über die HTML5-Videoattribute
Abbildung 14.30 Bei fiftythree.com/paper zeigt ein Erklärvideo die Bedienung und die wichtigsten Funktionen auf – schneller, als es ein Text könnte.
Durch die vereinfachte Einbindung von Videos sind in letzter Zeit verschiedene Einsatzzwecke entstanden. Wie in Abbildung 14.30 werden Videos gerne zur Vermittlung von Informationen eingesetzt. Erklärvideos erläutern beispielsweise die Funktionsweise oder Möglichkeiten einer App. Die Informationsvermittlung per Video ist für den Anwender oft entspannter, als sich erst Texte durchzulesen und Bilder dazu anzuschauen. Die audiovisuelle Vermittlung ist oft effektiver. Gleichzeitig bekommt der Anwender einen guten Überblick in kompakter Form. Die emotionale Wirkung von bewegten Bildern tut ihr Übriges dazu. Die Umsetzung erfolgt gerne auch in einem »Overlay«. Ähnlich wie in einer Lightbox-Bildergalerie (siehe Abschnitt 14.3.1, »Bildergalerie«) öffnet sich das Video über der Seite, und der Rest dunkelt sich ab.
Ein anderes Einsatzgebiet ist die Vermittlung von Emotionen durch Videos. Hier geht es mehr um eine vermittelte Stimmung als um Informationen. Teilweise laufen diese auch großflächig im Hintergrund der Seite ab. Sie starten häufig schon von allein direkt beim Aufrufen der Seite und bei großflächigem Einsatz meistens ohne (nervigen) Ton.
Videos können sehr gut eine persönliche, authentische Atmosphäre herstellen. Die Menschen hinter der Webseite und dem Unternehmen können mit bewegten Bildern (und Ton) sehr schön präsentiert und greifbarer werden, und der Anwender erhält einen Einblick in das Unternehmen.
14.4.2 Das HTML5-Audioelement
Die Einbindung von Audiodateien folgt demselben Prinzip wie bei den Videos. Das HTML5-Audioelement sorgt für eine einfache Einbindung:
<audio>
<source src="musik.ogg" type="audio/ogg">
<source src="musik.mp3" type="audio/mpeg">
<p>Dieser Browser unterstützt das HTML5-Audioelement leider nicht.</p>
</audio>
Listing 14.13 Audioeinbindung mit HTML5
Für die Browserkompatibilität sollten zwei Audioformate (MP3 und OGG) eingebunden werden. Das einleitende audio-Element kann dabei durch folgende Attribute ergänzt werden:
-
controls – Die Steuerelemente des Browsers (Play/Pause, Position/Lautstärke) sollen angezeigt werden.
-
autobuffer – Die Audiodatei soll direkt geladen werden, also nicht erst bei Klick auf den Play-Button.
-
autoplay – Der Inhalt soll sofort abgespielt werden, sobald genug geladen ist.
-
loop – Der Inhalt soll sich wiederholen.
Webdesign
