Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Sehen und Hören

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Sehen und Hören

Mit HTML5 sollte es einfacher werden, Video- und Audio-Dateien in seine Webseiten einzubauen. Ob das – beim aktuellen Stand – wirklich gelungen ist oder nicht, zeigt Olaf Gleba im heutigen Teil unserer HTML5-Reihe: Er stellt die Elemente <video> und <audio> vor.

Im heutigen Teil unserer HTML5-Serie geht es um die Elemente <video> und <audio>.

1. Element <video>

Filme im Web bereitzustellen ist momentan mit enormen Aufwand verbunden, will man möglichst alle Besucher einer Seite in den Genuß der Filme bringen. Neben mehrfacher Konvertierung und Einbindung verschiedener Formate, muss die unterschiedliche Einbindungs-Syntax der Browser berücksichtigt werden. Oftmals ist der einzig gangbare Weg der Einsatz zusätzlicher Funktionalitäten und Techniken in Form von Plugins und Script-Sprachen (Flash, Javascript).

Mit dem Element video verspricht die HTML5 Spezifikation eine native, also von zusätzlicher Technik und Software unabhängige, Einbindung von Filmen in Webseiten.

1.1 Browser-Unterstützung

Neben Firefox ab Version 3.5 und Safari ab 3.2 unterstützt der aktuelle Google Chrome Browser (Version 3.x) das HTML5 Element video insofern, als dass erste Tests mit diesen Versionen möglich sind. Opera hat für Version 10.1 eine Unterstützung des Elementes video angekündigt. Redmonder Browser (IE) bleiben augenblicklich komplett außen vor.

Man sollte immer im Hinterkopf behalten, dass die Implementierung von HTML5 Elementen bis zur endgültigen Verabschiedung des Standards (oder sich die normative Kraft des Faktischen durchsetzt) immer nur vorläufigen Charakter hat. So unterscheidet sich momentan die Art und Weise der Implementierung, und es gibt keine Gewähr, dass und in welcher Form die Elemente in zukünftigen Versionen der Browser verfügbar sein werden.

1.2 Codecs und Formate

Mit der Einführung des neuen Elementes video verband sich bei vielen Entwicklern sicherlich die Hoffnung, dass man sich auf einen einheitlichen Codec einigen würde, den alle Browser unterstützen und das Bereitstellen verschiedener Formate überflüssig macht. Dass Weihnachten und Geburtstage aber in der Regel nicht auf einen Tag fallen, scheint sich leider auch in diesen Fall zu bewahrheiten, wie der Beitrag von Ian Hicks (englisch) auf der WHATWG-Mailingliste andeutet.

Während die Browser der Mozilla Foundation und Opera ausschließlich Ogg Media Container(.ogg, .ogv) und den Theora Video Codec unterstützen, bedient sich Apple's Safari1 des H.264 Codec (.mp4, .mp4v), der Google Browser Chrome wiederum unterstützt beide, lässt sich aber eine Hintertür (siehe Ian Hicks' Beitrag) offen. Redmond schweigt momentan komplett zu einen zukünftig unterstützten Codec.

1.3 Einbindung

Die Syntax, um filmische Inhalte in eine Seite einzubinden, ist schlicht und einfach:

Quelltext Beispiel 1: Einbindung einer .ogg/Theora Filmdatei

<video src="sample.ogg" controls>
  Ihr Browser unterstützt das Element
  <code>video</code> nicht
  oder erkennt das Format der Datei nicht.
</video>

Beispiel 1: Einbindung einer Ogg/Theora (.ogg) Filmdatei

Quelltext Beispiel 2: Einbindung einer MPEG-4/H.264 (.mp4) Filmdatei

<video src="sample.mp4" controls>
  Ihr Browser unterstützt das Element
  <code>video</code> nicht
  oder erkennt das Format der Datei nicht.
</video>

Beispiel 2: Einbindung einer MPEG-4/H.264 (.mp4) Filmdatei

Neben dem Attribut src, das den Pfad zur Quelldatei angibt, fügt das optionale Attribut controls dem Film die notwendigen Steuerungselemente hinzu. Erkennt der Browser das Format der Filmdatei nicht oder ist ihm das Element video unbekannt, wird der Inhalt zwischen dem öffnenden und schließenden Tag angezeigt, bzw. gerendert. Dieses Verhalten bedeutet zum Einen eine attributlose, textliche Fallbacklösung2, zum Anderen ermöglicht es aber auch, die Filmdatei an dieser Stelle konventionell in einem Flash-Container über das object Element einzubinden.

Beispiel: Fallback unter Anwendung des object Elementes

<video src="sample.mp4" controls>
  <object data="flvplayer.swf"
      type="application/x-shockwave-flash">
    <param value="flvplayer.swf" name="movie"/>
  </object>
</video>

Um Filmdateien mit unterschiedlichen Formaten einzubinden, wird das generische source Element genutzt:

Quelltext Beispiel 3: Einbindung multipler Formate

<video controls>
  <source src="sample.ogg" type="video/ogg" />
  <source src="sample.mp4" type='video/mp4';
     codecs="mp4v.20.240"' />
  Ihr Browser unterstützt das Element
  <code>video</code> nicht oder beide Formate
  (mp4, ogg) der Filmdatei(en) sind unbekannt.
</video>

Beispiel 3: Einbindung multipler Formate

Unterstützt der Browser das Ogg Container Format nicht, wird er versuchen den MPEG4 Film abzuspielen. Kennt er keines der beiden Formate/Codecs oder ist ihm das HTML5 Element video unbekannt, wird der sonstige Inhalt zwischen dem öffnenden und schließenden Tag angezeigt 2.

Das Attribut type des Elementes source ist optional. Neben dem MIME-Typ kann zusätzlich über den Parameter codecs ein dezidierter Codec angegeben werden. Ist dem Browser dieser Codec nicht bekannt, wird der Film nicht angezeigt.

Wird das Attribut type nicht gesetzt, erhält der Browser die MIME-Information vom Server und gleicht sie mit den Möglichkeiten des Browsers ab. Gibt man das Attribut type an, wird der Browser ohne Rücksprache mit dem Server versuchen den MIME-Typ zu interpretieren. Um Bandbreite zu sparen, empfehle ich den MIME-Typ grundsätzlich anzugeben, da damit eine unnötige Kommunikation zwischen Client und Server vermieden wird.

Wird der MIME-Typ dennoch weggelassen, sollte darauf geachtet werden, dass der Server die Dateien mit dem korrekten MIME-Typ ausliefert. Ist dies nicht in der Konfigurationsdatei des Webservers angegeben, kann dies mit der folgenden Angabe in einer .htaccess Datei nachgereicht werden (Voraussetzung hier ist natürlich die Berechtigung die Direktive in einer .htaccess Datei editieren zu können).

Quelltext: Server die relevanten Mime-Typen in einer .htaccess bekannt machen:

AddType video/ogg .ogg
AddType video/mp4 .mp4

1.4 Attribute

Attribut Wertebereich Beschreibung
src url Der Pfad zum Film.
controls boolesche Angabe (true|false) Legt fest, ob die Steuerelemente für den Film angezeigt werden.

Hinweis: Im Gegensatz zu sonstigen Verhalten einer booleschen Werteangabe wird die Eigenschaft nicht über

controls="true|false"

an oder abgeschaltet. Um das Attribut zu verwenden, fügt man dem Element das Attribut einfach wertelos hinzu:

controls

poster3 url Der Pfad zur Grafik, die angezeigt wird, während der Film geladen wird und/oder wenn es generelle Probleme (bspw. nicht vorhanden sein der Filmdatei) mit der Anzeige des Film gibt.
autoplay boolesche Angabe (true|false) Legt fest, ob der Film nach dem Laden automatisch abgespielt werden soll. Hier gilt ebenfalls der Hinweis, dass das Attribut wertelos hinzugefügt wird, wenn es verwendet werden soll.
autobuffer boolesche Angabe (true|false) Wird dieses Attribut gesetzt, wird der Film direkt beim Aufruf der Seite geladen. Normalerweise wird ein Film erst geladen, wenn die Wiedergabe gestartet wird oder das Attribut autoplay gesetzt ist. Auch hier gilt der Hinweis, dass das Attribut wertelos hinzugefügt wird, wenn es verwendet werden soll.
loop4 boolesche Angabe (true|false) Legt fest, ob die Datei wiederholend abgespielt werden soll. Auch hier der Hinweis, dass das Attribut wertelos hinzugefügt wird, wenn es verwendet werden soll.
height Pixel Die Anzeigehöhe des Films. In der Regel sollte dies die Originalhöhe des Films sein.
width Pixel Die Anzeigeweite des Films. In der Regel sollte dies die Originalweite des Films sein.

1.5 Media Elemente und Attribute

Wie an anderer Stelle schon erwähnt, blendet das Attribut controls die Steuerelemente eines Films ein oder aus. Das Aussehen, Anzahl und Position dieser Elemente ist abhängig von der Implementierung des Attributes in den verschiedenen Browsern und Betriebssystemen. Dankenswerterweise stellt die HTML5 Spezifikation über eine Script-Schnittstelle eine Vielzahl von Media Elementen und Attributen zur Verfügung, so dass unter Anwendung von Javascript die Steuerung und Anzeige eines Films individuell gestaltet werden kann.

Quelltext: Individuellen Wiedergabe/Pause Button programmieren

<script>
function playPause() {
  var meinFilm = document.getElementsByTagName('video')[0];
  if (meinFilm.paused)
    meinFilm.play();
  else
    meinFilm.pause();
}
</script>

<input type=button onclick="playPause()"
  value="Wiedergabe/Pause" />

Quelltext: Öffne ein Alert-Fenster, wenn das Event ended einen Status zurückliefert.

<script>
meinFilm.addEventListener('ended', function () {
  alert('Das Ende des Films ist erreicht')
});
</script>

Auch hier ist es wichtig im Hinterkopf zu behalten, dass die Anzahl und Benennung der Media Elemente und Attribute noch nicht in Stein gemeißelt sind und das ein oder andere Element/Attribut hinzukommen oder auch ersatzlos wegfallen kann.

1.6 Fazit

Während alleine nur die Aussicht auf Nutzbarkeit des Elementes video ein Leuchten in die Augen von Frontend-Entwicklern zaubert, fällt die Enttäuschung über die (bisher  – die Hoffnung stirbt zumindest ziemlich weit hinten) verpasste Chance einen einheitlichen Codec zum originären Teil der Spezifikation zu machen, dann umso größer aus. Dies ist allerdings weniger der WHATWG anzulasten, sondern auf die Süppchen der einzelnen Browserhersteller und Lizenzgeber der Codecs zurückzuführen.

Ohne konkret auf die lizenzrechtlichen Probleme einzugehen, ist es aus Sicht eines Entwicklers einfach schade, dass ein Konsens zwischen WHATWG, Browserherstellen und Codec-Lizenzgebern auch zu einem späteren Zeitpunkt eher unwahrscheinlich ist. So wird viel Potential des neuen Elementes verschenkt.

Zieht Microsoft in den nächsten Monaten nach, bleibt zumindest der Vorteil einer einheitlichen Syntax, die zukünftig übergreifend in allen aktuellen Browsern ohne Redundanz von Quelltext und zusätzlichen Techniken eingesetzt werden kann.

2. Element <audio>

Auch hier stehen wir momentan vor der gleichen Ausgangslage. Um möglichst viele Besucher zu erreichen, müssen bisher multiple Formate erstellt werden und die Anzeige und Einbindung in die Webseite unter zur Hilfenahme weiterer Techniken (Flash) und Funktionalitäten (Javascript) realisiert werden.

Durch das Element audio verspricht die HTML5 Spezifikation auch hier eine native Einbindung von Audio Dateien in Webseiten.

2.1 Browser-Unterstützung

Neben Firefox ab Version 3.5, Safari ab 3.2 unterstützt der aktuelle Google Chrome Browser (Version 3.x) das HTML5 Element audio in einer Art und Weise, die sich für erste Tests eignet. Opera hat für Version 10.1 – zeitgleich mit der video Unterstützung – die Verfügbarkeit des Elementes audio angekündigt. Der Internet Explorer steht auch hier in der Ecke mit dem Gesicht zur Wand.

Auch gilt das Gesagte zur Vorläufigkeit der Implementierung in den einzelnen Browsern. Sicher ist, dass nichts sicher ist.

2.2 Codecs und Formate

Browser der Mozilla Foundation unterstützen Ogg Media Container (.ogg) verbunden mit dem Vorbis Audio Codec, Apple's Safari das MPEG-1, Audio Layer 3 Format (.mp3), der Google Browser Chrome erkennt beide Formate/Codecs. Das Wave (.wav) Format wird von FF ab 3.1, Safari ab 3.x und zukünftig Opera ab 10.1 (für letztgenannten vorläufig als einziges Format) unterstützt.

2.3 Einbindung

Quelltext Beispiel 1: Einbindung einer Wave (.wav) Audiodatei

<audio src="sample-audio.wav" controls>
  Ihr Browser unterstützt das Element
  <code>audio</code>
  oder erkennt das Format der Datei nicht.
</audio>

Beispiel 1: Einbindung einer Wave (.wav) Audiodatei

Um Audiodateien mit unterschiedlichen Formaten einzubinden, wird das generische source5 Element genutzt:

Quelltext Beispiel 2: Einbindung multipler Formate

<audio controls>
  <source src="sample-audio.ogg" type="audio/ogg" />
  <source src="sample-audio.mp3" type="audio/mpeg" />
  Ihr Browser unterstützt das Element
  <code>audio</code> nicht oder beide Formate
  (Ogg/Vorbis, MPEG3) der Audiodatei(en) sind unbekannt.
</audio>

Beispiel 2: Einbindung multipler Formate

Es sollte grundsätzlich darauf geachtet werden, dass der Server die Datei(en) mit dem korrekten MIME-Typ überträgt. Hier gelten die gleichen Hinweise die zuvor in der Beschreibung des Elementes video erwähnt wurden. Mime-Typen für Audiodateien:

Quelltext: Server die relevanten (Audio) Mime-Typen in einer .htaccess bekannt machen:

AddType audio/x-wav .wav
AddType audio/ogg .ogg
AddType audio/mpeg .mp3

2.4 Attribute

Attribut Wertebereich Beschreibung
src url Der Pfad zur Audiodatei.
controls boolesche Angabe (true|false) Legt fest, ob die Steuerelemente für die Audiodatei angezeigt werden.

Hinweis: Im Gegensatz zu sonstigen Verhalten einer booleschen Werteangabe wird die Eigenschaft nicht über

controls="true|false"

an oder abgeschaltet. Um das Attribut zu verwenden, fügt man dem Element das Attribut einfach wertelos hinzu:

controls

autoplay boolesche Angabe (true|false) Legt fest, ob die Datei nach dem Laden automatisch abgespielt werden soll. Hier gilt ebenfalls der Hinweis, dass das Attribut wertelos hinzugefügt wird, wenn es verwendet werden soll.
autobuffer boolesche Angabe (true|false) Wird dieses Attribut gesetzt, wird die Datei direkt beim Aufruf der Seite geladen. Normalerweise wird sie erst geladen, wenn die Wiedergabe gestartet wird oder das Attribut autoplay gesetzt ist. Auch hier gilt der Hinweis, dass das Attribut wertelos hinzugefügt wird, wenn es verwendet werden soll.
loop4 boolesche Angabe (true|false) Legt fest, ob die Datei wiederholend abgespielt werden soll. Auch hier der Hinweis, dass das Attribut wertelos hinzugefügt wird, wenn es verwendet werden soll.

2.5 Media Elemente und Attribute

Die HTML5 Spezifikation stellt über eine Script-Schnittstelle Media Elemente und Attribute zur Verfügung, mit deren Hilfe man individuell die Steuerung und Anzeige einer Audiodatei beeinflußen kann.

Beispiel 3: Individuellen Wiedergabe Button anlegen

<script>
function playFile() {
  var audioobj = new Audio("sample.mp3");
  audioobj.play();
}
</script>

<input type=button onclick="playFile()" value="Wiedergabe" />

Die Vorläufigkeit der Anzahl, Benennung einzelner Elemente und Attributen wurde ja schon mehrfach erwähnt, aber ein erneuter Hinweis hierauf soll deutlich machen, dass man die Glacé-Handschuhe beim Coden anbehalten sollte…

2.6 Fazit

Auch hier ist die (Vor)Freude aufgrund des Format- und Codecs Durcheinanders nicht ungetrübt. Zur Freude, zukünftig ein standardisiertes Element unter den Händen zu haben, gesellt sich eine gewisse Enttäuschung über die Aussagen und Pläne der Browserhersteller zur Format/Codec Implementierung in Ihren Produkten.

3. Weiterführende Informationen zu den Elementen video und audio

Spezifikation

Tutorials und Informationen

Anwendungen

1 Man kann Safari allerdings recht problemlos das ogg/Theora Format beibringen, in dem man die universale Quicktime-Komponente der Xiph Open Source Community installiert.

2 Soweit die Theorie. Aktuell verhalten sich weder Firefox noch Safari so, wie es die Spezifikation vorsieht, wenn es um die Anzeige des Inhalts innerhalb des Tags geht. Während Firefox eine graue Box mit einem dicken "X" in der Mitte rendert sobald das Attribute controls angegeben und der Format/Codec nicht bekannt ist, zeigt Safari statt der grauen Box eine weißen oder transparente Fläche und auch die Steuerungselemente des Films an.

3 In Firefox ist dieses Attribut noch nicht implementiert.

4 In Firefox ist dieses Attribut noch nicht implementiert.

5 Hier ist ein fehlerhaftes Verhalten von Firefox zu berücksichtigen: Bindet man als Erstes eine Datei ein, deren Format Firefox unbekannt ist, bricht Firefox die Ausführung des Elementes ab. Umgehen kann man diesen Fehler, in dem die Referenzierung mehrerer source Elemente mit einer Datei beginnt, deren Format/Codec Firefox bekannt ist.

Kommentare

Benjamin Peter
am 28.09.2009 - 15:03

Hi,

"Redmont" schreibt sich glaube ich mit 'd'.

Ich hätte ja gerne eine PM geschrieben aber leide Keine Möglichkeit dazu gefunden. Der Kommentar kann auch gerne wieder gelöscht werden.

Permanenter Link
Eric Eggert

Eric Eggert (Webkraut)
am 28.09.2009 - 15:10

Danke, habe es korrigiert!

Permanenter Link

Alex B.
am 29.09.2009 - 10:27

Vielen Dank für die gute Zusammenfassung. Wirklich alles wichtige auf einer Seite. Sehr hilfreich!
Freue mich auf weitere Artikel zu HTML5!

Permanenter Link
Manuel Bieh

Manuel Bieh (Webkraut)
am 30.09.2009 - 12:26

Was mich an dieser Stelle mal interessieren würde: MUSS man Attribute wie controls, autoplay oder autobuffer wertlos angeben, oder kann man auch controls="true" schreiben?

Ich arbeite in letzter Zeit häufig mit XML und XSL und gerade XSL-Parser sind sehr empfindlich wenn da mal Anführungszeichen bei einem Attribut nicht gesetzt werden oder gar nur ein kaputtes Entity verwendet wird.

Permanenter Link
Olaf Gleba

Olaf Gleba (Autor)
am 30.09.2009 - 13:17

@Manuel

MUSS man Attribute wie controls, autoplay oder autobuffer wertlos angeben, oder kann man auch controls="true" schreiben?

Die Spezifikation sieht das nicht vor, bzw. erlaubt es nicht. Ein wenig merkwürdig finde ich den W3C Ansatz dann schon, produziert man damit doch u.U. Inkompatibilitäten zu Schnittestellen und Parsern.

Permanenter Link

Thomas Meinike
am 06.10.2009 - 10:21

@Manuel
Formal sollten inhaltslose Medienattribute analog zu den Formularattributen wie checked als checked="checked" bzw. checked="" behandelt werden können (beide Schreibweisen stehen so in der HTML5-Spezifikation). Nur bei Attributen wie autoplay, controls usw. ist das noch nicht konkretisiert. Verwende im XSLT-Fall einfach autoplay="", controls="" usw. Dann steht das auch so im Ergebnisdokument. Die Browser mit audio/video-Interpretation führen das auch aus.

Hier noch ein Beispiel für eine XSLT-Umsetzung von HTML 5:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output encoding="UTF-8" indent="yes" omit-xml-declaration="yes"/>

<xsl:template match="/">
<xsl:text disable-output-escaping="yes">&lt;!DOCTYPE html&gt;&#xA;</xsl:text>
<html lang="de">
<head>
<xsl:text disable-output-escaping="yes">&#xA;&lt;meta charset="UTF-8"&gt;&#xA;</xsl:text>
<title>Test</title>
</head>
<body>
<h1>audio-Element</h1>
<audio src="example.mp3" type="audio/mpeg" controls="" autoplay="" loop="">
<p>Ihr Browser unterstützt das audio-Element nicht (Alternativen, Download-Link).</p>
</audio>
</body>
</html>
</xsl:template>

</xsl:stylesheet>

Hinweis: Ich verwende bewusst nicht doctype-system="about:legacy-compat" für die DOCTYPE-Ausgabe (macht z. B. zeit.de so).

Permanenter Link

Fritz Weisshart
am 06.10.2009 - 13:24

Sehr schöne Zusammenfassung des Status Quo. Danke dafür.

Ich habe mal ein wenig mit der Script-Schnittstelle experimentiert. Ziel der Übung war es, die normalerweise nur mit der Maus bedienbaren Controls Fortschrittsbalken und Lautstärke auch für reine Tastaturnutzung zugänglich zu machen. Dies gelingt mit JavaScript recht gut. Natürlich nicht stufenlos, sondern in festgelegten Schritten.
Demo: Video und Audio

Permanenter Link

Die Kommentare sind geschlossen.