Die Anzeige bzw. das Verhalten über Attribute steuern

Transkript

1 5.1 Multimedia in der Praxis: Problemzonen mobiler Geräte bei multimedialen Inhalten Audio- und Videodateien integrieren Mit HTML 5 werden zwei neue Elemente zur Integration von Multimedia-Inhalten eingeführt: <audio> und <video>. Beide verfügen über Anfangs- und End-Tag und zwischen beidem kann alternativer Inhalt definiert werden. Die Syntax der beiden Elemente lautet daher ganz einfach: <video src="quell-url">alternativer Inhalt</video> <audio src="quell-url">alternativer Inhalt</audio> Dabei ersetzen Sie Quell-URL natürlich durch die URL zur abzuspielenden Datei. Wenn Sie die Elemente auf diese Weise in die Seite integrieren, werden keine Steuerelemente zur Steuerung des Abspielvorgangs angezeigt. Steuern können Sie das Abspielen dann nur per JavaScript, indem Sie die Multimedia-API von HTML 5 nutzen. Die Audiodatei ist ohne Steuerelemente gar nicht sichtbar. Beim <video>-element wird aber zumindest das Video bzw. ein eventuell definiertes Vorschaubild angezeigt. Die Anzeige bzw. das Verhalten über Attribute steuern Beide Elemente haben aber neben dem bereits gezeigten Attribut src weitere Attribute, nämlich: controls ist ein boolesches Attribut, das festlegt, ob Steuerelemente zur Steuerung der Wiedergabe angezeigt werden sollen. Gemäß HTML-5-Entwurf ist es dem Browser freigestellt, wie er die Steuerelemente anzeigt. Er darf diese als Menüeinträge, im Kontextmenü oder auch in jeder anderen Form bereitstellen, nur dürfen die Steuerelemente keinen Einfluss auf das Seitenlayout haben. Das heißt. Die Anzeigefläche des Elements darf sich durch Ein- oder Ausblenden der Steuerelemente nicht verändern. autoplay legt fest, dass die Quelldatei nach dem Laden der Seite und dem Übertragen der Quelldatei automatisch abgespielt werden soll. preload bestimmt, wie die Daten der Multimediadatei vom Server übertragen werden, bevor mit dem Abspielen begonnen wird. Dazu stehen diese Werte zur Verfügung. Fehlt das Attribut, wird die Browsereinstellung verwendet. none, dem Browser wird empfohlen, die Daten nicht zu laden, weil die Wahrscheinlichkeit, dass die Datei abgespielt wird, gering ist. metadata, dem Browser wird empfohlen, die Daten nicht zu laden, weil die Wahrscheinlichkeit, dass die Datei abgespielt wird, gering ist. Die META-Daten der Datei dürfen aber heruntergeladen werden. 191

2 5. Unterhaltung muss sein, Audio- und Videoelemente einbinden auto, dem Browser wird erlaubt, die Datei herunterzuladen. loop bestimmt, falls vorhanden, dass die Datei in einer Endlosschleife abgespielt wird. Um eine Videodatei einzubinden, können Sie also bspw. folgenden Code verwenden. Dann sollte die Datei geladen und abgespielt werden, wenn der Browser das Dateiformat und das <video>-element unterstützt. <video src="biene01.ogg" controls autoplay preload="auto"> Das Video kann nicht dargestellt werden. </video> Wie der Browser die Steuerelemente darstellt, ist wirklich ganz unterschiedlich. Darauf können Sie nur Einfluss nehmen, indem Sie die Steuerelemente ausblenden und stattdessen eine eigene Steuerung per JavaScript programmieren. Der Internet Explorer 9 blendet die Steuerelemente auf dem Video ein, wenn sich die Maus über dem Anzeigebereich befindet. Safari unter Windows zeigt die Steuerelemente als schmale Leiste ganz unten an, aber ebenfalls auf dem Video. 192

3 5.1 Multimedia in der Praxis: Problemzonen mobiler Geräte bei multimedialen Inhalten Interessant ist, dass die Implementation beim gleichen Browsern und verschiedenen Betriebssystemen deutlich unterschiedlich ausfällt. Auf dem ipad zeigt Safari in der Normalansicht nur eine minimale Navigationsleiste mit Start-Button und Symbol zum Maximieren an. Erst wenn Sie die Anzeige über das Maximieren-Symbol auf die verfügbare Fläche maximieren, werden alle Symbole angezeigt. Safari auf dem ipad zeigt in der Normalansicht nur eine minimale Navigationsleiste mit Start-Button und Symbol zum Maximieren an. Erst in der maximierten Ansicht werden alle Navigationselemente sichtbar, zum Teil oberhalb und teilweise unterhalb des Videos angeordnet. Auch das Verhalten von Safari auf dem ipad entspricht aber dem HTML-5- Entwurf, denn der schreibt nicht vor, auf welche Weise die Browser die Navigations-Buttons zur Verfügung stellen sollen. 193

4 5. Unterhaltung muss sein, Audio- und Videoelemente einbinden Chrome blendet die Steuerelemente ebenfalls am unteren Rand des Videos ein. Zusätzliche Elemente für Filme Für das <video>-element gibt es zusätzlich die Attribute: width height poster Mit width und height können Sie Breite und Höhe des Anzeigebereichs festlegen. Alternativ könnten Sie dazu aber auch CSS verwenden oder die Attribute weglassen, denn das Video wird dann automatisch in der Größe angezeigt, in der es gespeichert ist. Allerdings hilft die Angabe von Breite und Höhe dem Browser bei der korrekten Darstellung der restlichen Seite, bis das Video übertragen ist. Interessant ist außerdem das Attribut poster. Mit seiner Hilfe können Sie ein statisches Hintergrundbild festlegen. Der HTML-5-Entwurf empfiehlt dazu ein Bild in der gleichen Größe und dem gleiche Kantenverhältnis, in dem das Video vorliegt, und empfiehlt außerdem, es als Bild aus dem Video zu entnehmen. Unter der Voraussetzung, dass das Bild als JPG-Bild im gleichen Verzeichnis wie das Video gespeichert ist, könnte der Code wie folgt aussehen: 194

5 5.1 Multimedia in der Praxis: Problemzonen mobiler Geräte bei multimedialen Inhalten <video src="biene01.mp4" controls autoplay preload="auto" poster="biene01.jpg" style="width:424px;height:318px"> Das Video kann nicht dargestellt werden. </video> Tipp Das poster-attribut ist für Firefox notwendig, damit dieser das Video darstellt und auch abspielen kann. Sie sollten es daher angeben. Analog dazu würde ein <audio>-element zur Einbindung von Audiodateien wie folgt lauten: <audio src="kalimba.mp3" controls> </audio> Auch hier hängt die Darstellung der Steuerelementleiste vom verwendeten Browser ab. Wenn Sie das controls-attribut komplett weglassen, stellt der Browser das <audio>-element unsichtbar dar. Darstellung des Audioplayers in Chrome. Problemzonen und Browserkompatibilität Auch wenn die Unterstützung der Elemente <audio> und <video> auf den ersten Blick recht gut erscheint und in der Praxis einsetzbar ist, gibt es natürlich durchaus ein paar Probleme. Das erste besteht darin, dass nicht jeder Browser die gleichen Dateiformate und Codec-Standards hat, die für die Komprimierung und Speicherung der Daten verwendet werden. Das liegt vor allem daran, dass sich die Browserhersteller bisher nicht auf einen gemeinsamen Standard einigen konnten und der HTML-5-Entwurf daher auch keine Vorgaben macht, an die sich auch kleinere Browser halten sollten. Dies führt im Endeffekt dazu, dass es kein Dateiformat bzw. keinen Codec gibt, der von allen aktuellen Browsern unterstützt wird, und folglich immer welche dabei sein werden, die das Video oder die Audiodatei nicht abspielen können. Allerdings bietet HTML 5 auch dafür eine Lösung an, die in Abschnitt 5.3 noch vorgestellt wird. 195

6 5. Unterhaltung muss sein, Audio- und Videoelemente einbinden Info: Codec Codec ist eine Bezeichnung für Verfahren zum Kodieren und Dekodieren von digitalen Signalen. Dies können Audio- oder Videosignale oder beides sein. Je nach Codec treten unterschiedlich große Daten- und damit Qualitätsverluste bei Kodierung auf, die dann die Wiedergabequalität beeinflussen. Der Codec ist oftmals zwar eng mit einem bestimmten Dateiformat bspw. MPEG verbunden, aber nicht zwingend. Generell bestimmt das Dateiformat nur, in welcher Form dann die kodierten Daten in der Datei gespeichert werden, legt aber nicht in jedem Fall fest, welcher Codec verwendet werden muss. Allerdings gibt es auch standardisierte Dateiformate, die dann auch den zu verwendenden Codec festlegen. Darüber hinaus gibt es ein weiteres Problem. Sie können zwar einen Alternativinhalt definieren, der wird jedoch nur angezeigt, wenn der Browser das <audio> bzw. <video>-element nicht kennt. Kennt er es, kann die Datei aber nicht abspielen, erscheint der Alternativinhalt nicht. Sie können also auch nicht für Browser, die nur das Format des Filmes nicht kennen, einfach Alternativinhalt definieren. Das funktioniert so also nicht. Sie müssen jedem Browser, der das Element kennt, auch die passende Datei zur Verfügung stellen, denn der Alternativinhalt wird nur von Browsern ohne HTML-5-Unterstützung angezeigt. 5.2 Geeignete Dateiformate für mobile Geräte Nicht jeder Browser unterstützt jeden Codec, das heißt also, Sie müssen die Dateien in dem für die entsprechenden Browser notwendigen Codec und einem von ihnen unterstützten Dateiformat liefern. Welche Dateiformate und Codecs sind aber geeignet? Aus Sicht eines Endgeräts, das eine Mobilfunkverbindung oder eine langsamere Internetverbindung nutzt, sollte natürlich ein Codec verwendet werden, der maximal komprimiert und gleichzeitig ein Dateiformat erlaubt, das die Daten auch ebenso platzsparend speichert. Leider ist es nur so, dass Sie nicht immer die Wahl haben, und leider gilt auch bei Musik- und Videodateien, dass eine stärkere Komprimierung immer auf Kosten der Qualität geht. Codecs und Dateiformate für Videos Momentan gibt es zwei Codec-Typen, die von HTML-5-fähigen Browsern vorrangig unterstützt werden. Das ist zum einen der H.264-Codec und der Vorbis- bzw. Theora-Codec zusammen mit dem OGG-Dateiformat. 196

7 5.2 Geeignete Dateiformate für mobile Geräte Beim H.264-Codec handelt es sich um einen kommerziell entwickelten Standard, der daher von den Browserherstellern lizensiert werden muss. Das wollen die meisten Browserhersteller nicht in Kauf nehmen. Microsoft hat für den Internet Explorer 9 angekündigt, den H.264-Codec zu unterstützen. Safari und Chrome tun das bereits, allerdings nur in Google Chrome, nicht in der OpenSource-Version Chromium. Opera und Firefox beschränken sich auf die Unterstützung des freien Codecs Theora. Dieser ist lizenzfrei nutzbar und daher deutlich kostengünstiger. Allerdings ist die Komprimierung auch weniger gut und dadurch die Wiedergabequalität gemindert. Chrome ist der einzige Browser, der beide Codecs unterstützt. Verwendung finden die Codecs in verschiedenen Dateiformaten. Ein freies Dateiformat, das für die Speicherung von Multimediainhalten, sowohl Audio als auch Videoformaten entwickelt wurde, ist das OGG-Format. Es kann daher sowohl für Audio- wie auch Videodateien verwenden werden, und neben den Multimediadaten auch Metadaten und Textinformationen speichern. Das OGG-Format unterstützt die freien Codecs Theora und Vorbis (Audio). Merkwürdigerweise kann jedoch keiner der Browser, die den Theora-Codec unterstützen sollen, OGG-Dateien als Videodateien abspielen. Allerdings muss man dabei auch berücksichtigen, dass sich die Implementationen der Elemente <audio> und <video> in allen Browsern noch in der Entwicklung befinden. Die folgende Tabelle zeigt die Unterstützung der verschiedenen Dateiformate und Codecs und sieht damit doch sehr ernüchternd aus. Denn Opera spielt keine einzige Videodatei ab, genau wie Dolphin und der Android-Systembrowser. Safari, Chrome, Internet Explorer 9 und Firefox beschränken sich derzeit auf MP4-Dateien, und Firefox spielt diese auch nur extern über ein Quicktime-Plug-in ab. Insbesondere die fehlende Unterstützung des OGG-Formats ist recht merkwürdig, denn eigentlich sollte es nach eigenen Angaben der Browserhersteller sowohl von Opera wie auch von Firefox und von Chrome unterstützt werden. Natürlich ist nicht nur wichtig, welche Formate und Codecs unterstützt werden, sondern auch, wie dabei die Qualität und die Dateigröße sind. Je kleiner die Dateien sind, desto besser geeignet sind sie für Handys und andere Geräte mit langsameren Internetverbindungen, aber desto geringer ist in der Regel auch die Qualität. So entsteht bspw. beim GP2-Format mit H.263- Codec aus einer 22 MByte MPEG-Datei eine GP2-Datei mit nur 500 KByte, das sieht man aber auch deutlich an der Qualität. 197

8 5. Unterhaltung muss sein, Audio- und Videoelemente einbinden Codec Erweiterung Dateiformat Mime- Typ IE 9 Opera 10 Opera Mini/Mobile Safari Chrome Dolphin Android-Browser Firefox H.264 MPEG-4/AVC.mp4 video/mp4 ja - - a ja ja - - ja b Theora ogg.ogv,.ogg video/ogg - - c - d - - e H.263 Flash.flv video/x-flv f H.264 Flash.f4v video/x-flv g H.264 MPEG.mpeg,.mpg video/mpeg h H.263 GP2.3gp,.3g2 video/3gpp, video/3gpp i ja a b c d e f g h i Keine Unterstützung des <video>-elements. Video lässt sich über das Kontextmenü starten, wird dann in einem neuen Tab geöffnet und mit Quicktime-Plug-in abgespielt. Laut Opera-Website soll Opera das OGG-Format mit Theora-Codec unterstützen, spielte aber im Test diese Datei nicht ab. Keine Unterstützung des <video>-elements. Laut Opera-Website soll Opera das OGG-Format mit Theora-Codec unterstützen, spielte aber im Test diese Datei nicht ab. Keine Unterstützung des <video>-elements Keine Unterstützung des <video>-elements. Keine Unterstützung des <video>-elements. Keine Unterstützung des <video>-elements. Das GP2-Format ist allerdings vornehmlich für Handys und mobile Geräte gedacht, die über kleine Displays verfügen. Dadurch fällt der Qualitätsverlust nicht so extrem auf. Die folgende Tabelle stellt die Dateigrößen der einzelnen Formate gegenüber. Sie wurden alle aus der mpg-datei mit dem gleichen Programm erzeugt. Format Bezeichnung Dateigröße GP2 GP2-Datei 595 KByte FLV Flash-Film KByte MP4 MPEG-4/AVC KByte MPG MPEG KByte OGG OGG-Datei 426 KByte 198

9 5.2 Geeignete Dateiformate für mobile Geräte Codecs und Dateiformate für Audiodateien Ein ähnliches Chaos gibt es auch bei den Audiodateien. Hier sind übliche und gängige Codecs WAV und MP3 sowie Vorbis, das den Audiokanal in OGG-Dateien kodiert. Codec Erweiterung Dateiformat Mime- Typ IE 9 Opera 10 Opera Mini/Mobile Safari Chrome Dolphin Android-Browser Firefox WAV.wav audio/ vnd.wave audio/wav audio/wave audio/x-wav - a ja - b ja ja - - ja Wave-Dateiformat Vorbis ogg.oga,.ogg audio/ogg - c - d - e MP3 Mpeg 3.mp3 audio/mpeg - f. - g ja ja - - WAV Wave-Dateiformat.wav audio/ vnd.wave audio/wav audio/wave audio/x-wav - a ja - b ja ja - - ja Vorbis ogg.oga,.ogg audio/ogg - c - d - e MP3 Mpeg 3.mp3 audio/mpeg - f. - g ja ja - - a b c d e f g Laut Opera-Website soll Opera das OGG-Format mit Theora-Codec unterstützen, spielte aber im Test diese Datei nicht ab. Die Wiedergabequalität ist beim Vorbis-Codec und im Vergleich zur Dateigröße besser als bei MP3 oder WAV. Allerdings wird das OGG-Format leider von keinem der getesteten Browser abgespielt. Dateien konvertieren Praxistauglich sind für die Praxis also im Videobereich das Flash-Format, das als Alternative für Browser genutzt werden kann, die kein <video>-element 199

10 5. Unterhaltung muss sein, Audio- und Videoelemente einbinden unterstützen, sowie MP4-Dateien und für Safari auch das GP2-Format. Für Audiodateien sollten Sie vorerst auf WAV und MP3 setzen. Allerdings heißt das natürlich: Sie müssen Dateien für Ihre Website, die Sie in anderen Formaten oder Codecs vorliegen haben, zunächst einmal in die gewünschten Zielformate konvertieren. Dazu gibt es Software, auch kostenlose, die Sie nutzen können. Für Videos können Sie bspw. folgende Programme verwenden: Quick Media Converter von Cocoon-Software Super von erightsoft Mithilfe von Quick Media Converter können Sie auch Audiodateien konvertieren oder Audiotracks aus Videos extrahieren. Konvertierung mit Quick Media Converter. 5.3 Browser-abhängige Integration von Audiound Videodateien Das größte Problem ist derzeit, dass es kein Format gibt, das von allen Browsern unterstützt wird. Sie müssen also einen Weg finden, für jeden Browser eine Datei anzubieten, die dieser gebrauchen kann, ohne dass er dazu unnötig viele Daten laden muss. Diese Möglichkeit gibt es auch in Gestalt des <source>-elements. 200

11 5.3 Browser-abhängige Integration von Audio- und Videodateien Mehrere Video- und Audioquellen definieren Sie können das <source>-element innerhalb des <audio>- oder <video>- Elements nutzen und damit eine Datenquelle definieren. Auch das <source>-element hat ein Attribut src, mit dem Sie Namen und Pfad der Quelldatei festlegen. Außerdem sollten Sie den MIME-Typ der Datei mit dem type-attribut definieren. Denn an ihm kann der Browser erkennen, ob es sich überhaupt lohnt, die Datei herunterzuladen. Wenn er den MIME-Typ nicht unterstützt, braucht er das gar nicht zu versuchen. <video controls autoplay preload="auto" poster="biene01.jpg"> <source src="biene01.mp4" type="video/mp4"> <source src="biene01.ogg" type="video/ogg"> <source src="biene01.3g2" type="video/3gpp"> 5 <p>das Video kann nicht dargestellt werden.</p> </video> Sie können sogar neben dem MIME-Typ auch den verwendeten Codec angeben. Dazu nutzen Sie dann die optionale codecs-angabe, die Sie aber innerhalb des type-attributs definieren. Damit können Sie den verwendeten Codec angeben. Das ist vor allem sinnvoll, wenn das Dateiformat verschiedene Codecs unterstützt. Wichtig ist dabei, dass Sie den MIME-Typ mit einem Semikolon abschließen und danach das Attribut codecs= gefolgt von der Codec-Bezeichnung angeben. Die Codec-Bezeichnung müssen Sie dazu in Hochkomma setzen und den gesamten Wert für das type-attribut in Anführungszeichen. <video controls autoplay preload="auto" poster="biene01.jpg"> <source src="biene01.mp4" type="video/mp4"> <source src="biene01.ogg" type="video/ogg; codecs='theora, vorbis'"> <source src="biene01.3g2" type="video/3gpp; codecs='h.263'"> 5 <p>das Video kann nicht dargestellt werden.</p> </video> Das Gute an dieser Methode ist, dass Sie Dateien in verschiedenen Formaten definieren können. Der Browser sieht sich die Elemente der Reihe nach an und entscheidet am MIME-Typ und falls vorhanden am codec-attribut, ob er die Datei anzeigen kann oder nicht. Kann er das, lädt er die erste zutreffende Datei herunter und zeigt sie an. Die anderen <source>-elemente werden dann ignoriert, verursachen also auch keinen unnötigen Traffic. Aus diesem Grund ist es auch ganz wichtig, für Browser, die theoretisch mehrere Dateien anzeigen könnten, eine sinnvolle Reihenfolge einzuhalten oder ihnen anhand anderer Eigenschaften die gewünschte Auswahl zu erleichtern. 201