Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Sponsored Post: Audio und Video in HTML5

Will man das <video> und <audio> tag zum Abspielen von medialen Inhalten in eigenen Applikationen und Websites einsetzen, muss man wissen, wie die unterschiedlichen Browser zu behandeln sind. Nicht zu vergessen ist auch die Windows 8 Plattform die es ermöglicht Applikationen mit HTML5 zu erstellen. Microsoft hat die elementaren Funktionen zur Wiedergabe für Windows 8 erweitert und in ein Player-Framework eingebettet, das neben dem Abspielen auch Dinge wie DRM und Smooth Streaming ermöglicht.

Das erste Beispiel in diesem Artikel soll Zeigen wie man ein einfaches MP3 File abspielt. Hierbei wird das File „mymusicfile.mp3“ mit Hilfe des im Browser implementieren Player abgespielt. „controls“ gibt an, dass zusätzlich die Bedienelemente dieses Players mit angezeigt werden sollen. Dieses sind beispielsweise Lautrstärke, Play/Pause, Spielzeit ect.

<audio src=“mymusicfile.mp3“ controls></audio>
Das Ergebnis sieht dann so aus:

Gleiches gilt für das <video> Tag

<video controls src="myvideofile.mp4" controls ></video>
Auch hier wird das Video im Player des Browsers angezeigt:

Die eigentliche Anzeige kann zwar in Bezug auf Größe und Position ohne Probleme über alle Browser Plattformen hinweg festgelegt werden. Aber es gibt erhebliche Unterschiede, welche Fileformate und  welche Codecs von den einzelnen Browsern unterstützt werden. So sind die oben genannten Beispiele zwar im IE9 aber zum Beispiel nicht im Opera-Browser lauffähig.

Um eine Kompatibilität über mehrerer Browser hinweg zu gewährleisten ist es daher notwendig die Dateien in mehreren Formaten vorzuhalten und im Video- oder Audio-Tag anzugeben.

<audio controls>
<source src="mymusicfile.ogg">
<source src="mymusicfile.mp3">
</audio>
Zusätzlich sollte der MIME type („type“ Attribute) angegeben werden. Dieses ist zwar in den meisten Fällen nicht notwendig, da die Browser die Entscheidung welches File verwendet wird auf Basis der Endung treffen, erleichtert aber die Lesbarkeit und definiert eindeutig welches File verwendet wird.
<audio controls>
<source src="mymusicfile.ogg" type="audio/ogg" >
<source src="mymusicfile.mp3" type="audio/mp3" >
</audio>
Dennoch ist der zur Verfügung stehende Support der einzelnen Formate eines der größten Probleme beim Einsatz des Video- und Audio-Tags. Die folgende Tabelle Zeigt eine aktuelle Übersicht für das Video Tag:

Video Windows 8 App IE9+ Chrome Safari Mobile Firefox Opera
MP4 (h.264/AAC) ja ja ja ja ja nein nein
WebM (VP8/Vorbis) ja installieren ja nein nein ja ja

Entsprechend die aktuelle Übersicht für die Audio Formate:

Audio Windows 8 App IE9+ Chrome Safari Mobile Firefox Opera
MP3 ja ja ja ja ja nein nein
Ogg Theora nein ja* ja nein nein nein nein
WAV ja ja ?(**) ja ja ja ja

*Kann nachinstalliert werden    ** zur Zeit unklar

Um auch eine Kompatibilität mit älteren Browsern (wie z.B. IE8) zu gewährleisten, die unter Umständen gar kein HTML5 unterstützen, ist es notwendig in Websites einen entsprechenden Fallbackcode einzufügen. Im einfachsten Fall kann das ein einfacher Hinweis sein, dass der Benutzer seinen Browser erneuern muss.

<video id="videoout" width="640" height="360" >
<source src="myvideofile.mp4" type="video/mp4">
<source src="myvideofile.webm" type="video/webm">
<p>Please update your browser</p>
</video>
Besser ist es aber, wenn die Website auf eine alternative Darstellung zurückgreift. Hierzu kann zum Beispiel Flash dienen. In jedem Fall muss auch hier ein Fallback auf einen Hinweis erfolgen, dass beispielsweise Flash nachinstalliert werden muss.
<video id="videoout " width="640" height="360" >
<source src="myvideofile.mp4" type="video/mp4">
<source src="myvideofile.webm" type="video/webm">
<object width="640" height="360"
classid    ="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase= "http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="player.swf?file=myvideofile.mp4">
<embed src="player.swf?file=video.mp4" width="640" height="360"></embed>
<p>Please update your browser or install Flash</p>
</object>
</video>
Natürlich hat diese Lösung auch Nachteile, da das Video in mehreren Formaten gespeichert werden muss und die Darstellung der Videos sich vom HTML5-Videoplayer des Browsers erheblich unterscheiden kann. Auch sind alle Interaktionen mit JavaScrip-Code, die den Player konfigurieren, natürlich in der Flash-Version nicht verfügbar oder müssen mühsam selber implementiert werden.

Parameter  der Audio und Video Tags und Einbindung in Java Script

Ein weiterer großer und Interessanter Bereich bei der Einbindung von Audio- und Video-Inhalten ist, dass man die Darstellung des Audio- und Video-Tags in einem weiten Bereich frei gestalten und auch an den Inhalt anpassen kann.

Im einfachsten Fall können die Controls durch eigene ersetzt werden. Hierdurch ist auch ein über Browser hinweg gleiches Aussehen der Videodarstellung umsetzbar. Im Folgenden Beispiel werden vier  Buttons für „Play“, „Pause“ und für die Lautstärkeeinstellung  realisiert. Diese steuern dann direkt Methoden des Players, wie zum Beispiel play() oder pause() an.

<audio id="videoout" src="mymusicfile.mp3"></audio>
<div>
<button onclick="document.getElementById('videoout').play()">Play</button>
<button onclick="document.getElementById('videoout').pause()">Pause</button>
<button onclick="document.getElementById('videoout').volume+=0.1">Volume Up</button>
<button onclick="document.getElementById('videoout').volume-=0.1">Volume Down</button>
</div>
Der Code oben ist natürlich ein sehr einfaches Beispiel. Die komplette HTML5-Media-API enthält viel mehr, um einen wirklich vollständigen Player zu bauen.

Die Folgenden Parameter geben Auskunft über die Eigenschaften des Video Elements:

  • currentSrc beschreibt das Media-File, das vom Browser abgespielt wird.
  • videoHeight und videoWidth beschreiben die Videogröße.
  • volume spezifiziert die Lautstärke (Wert zwischen 0…1).
  • currentTime gibt die aktuelle Wiedergabeposition in Sekunden an.
  • duration gibt die gesamt Wiedergabelänge der Datei in Sekunden an.
  • buffered gibt die Position an, bis zu der die Media-Datei geladen ist.
  • playbackRate gibt die Wiedergabegeschwindigkeit an (1: Normale Geschwindigkeit,: 1,5 schneller, 0.5 langsamer ).
  • ended gibt an, ob die Datei das Ende erreicht hat.
  • paused gibt an, ob die Wiedergabe angehalten wurde.
  • seeking gibt an, ob der Browser versucht die Datei zu Laden, um zur nächsten Position zu gelangen.

HTML5 Media Objekts enthalten zusätzlich folgende Methoden, die aus JavaScript heraus angesprochen werden können:

  • play versucht die Media-Datei zu laden und abzuspielen.
  • pause stoppt die Wiedergabe der Media Datei.
  • canPlayType(type) erlaubt die Abfrage, ob ein bestimmter Codec vom Browser unterstützt wird oder nicht.
  • load kann aufgerufen werden, um eine neue Video-Datei zu laden.

Die HTML5 Media API definiert darüber hinaus 21 Events. Hier sind die Wichtigsten:

  • loadedmetadata wird aufgerufen, wenn Länge und Größe der Media Daei bekannt sind.
  • loadeddata wird aufgerufen, wenn der Browser die aktuelle Position wiedergeben kann.
  • playing wird aufgerufen, wenn die Wiedergabe wieder  nach „pausing“, „buffering“ oder „seeking“ startet.
  • ended wird aufgerufen, wenn die Wiedergabe das Ende Der Datei Erreicht hat.
  • timeupdate wird aufgerufen, wenn die Media-Datei wieder gegeben wird.
  • volumechange wird aufgerufen, wenn die Lautstärke verändert wurde.

Das Audio- und Video-Tag in HTML 5 stellen also eine leistungsfähige Plattform für die Wiedergabe  von Media-Dateien dar. Die Browser spezifischen Eigenarten sind aber zu beachten und sind im Moment eigentlich nur durch das Bereitstellen von Inhalten in unterschiedlichen Formaten und mit entsprechendem Fall-Back-Implementierungen sinnvoll zu beherrschen.

Zuletzt soll nicht unerwähnt bleiben, dass Windows 8 mit seiner W3C konformen Implementierung den Einsatz des Video- und Audio-Tags auch für  Metro Style Applikationen erlaubt. Microsoft hat hier noch einige Erweiterungen geschaffen die  zusätzlich DRM (Play Ready) und Smooth Streaming erlauben. Hierzu stellt Microsoft ein entsprechendes Player SDK bereit, das in der heutigen Form zur Erstellung von Metro-Style-Applikationen die premium Video und Audio Inhalte anzeigen soll.

Finde einen Job, den du liebst

3 Reaktionen
floyd
floyd

Endlich mal eine einfache Uebersicht. Danke dafuer

Antworten
Alex Müller
Alex Müller

Warum ist dies eigentlich ein Sponsored Post? Ich sehe keinen Sponsor.

Antworten
manuel
manuel

Warum 2 mal controls?

Und welcher Browser ist mit "Mobile" gemeint? Auf meinem Androiden kann ich ohne Probleme WebM abspielen.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen