~~NOCACHE~~
|[[:inf:web:sound_und_videos_einbinden:Fragen]]|**Inhalte**|[[:inf:web:sound_und_videos_einbinden:Arbeitsaufträge]]|

====== Sound und Videos einbinden ======
===== Multimedia im Web =====
Im Web werden in immer stärkerem Maß multimediale Technologien wie Videos oder Musik eingesetzt, um die Attraktivität der Seiten zu erhöhen.

==== Vor HTML5: Plug-ins ====
Bis HTML4 ist Hypertext nicht multimediafähig. Das bedeutet, dass der Internetbrowser Unterstützung benötigt, um Sound- oder Videodateien anzeigen zu können. Dies kann mit Plug-ins realisiert werden. Plug-ins sind an den Browser angekoppelte oder von ihm abhängige Zusatzdateien mit den benötigten Programmfunktionen. Sie ermöglichen dem Browser, fremde Dateiformate auf der Webseite anzuzeigen, auch wenn der Browser diese Dateiformate nicht direkt unterstützt.

Voraussetzung hierfür ist, dass der Anwender das entsprechende Plug-in auf seinem Computer installiert hat.

Die wichtigsten Plug-ins sind das Animationsformat Adobe Flash, der Dokumentanzeiger Acrobat Reader für die Anzeige von PDF-Dateien, die Audio-Plug-ins für die Formate MP3, MIDI, WAVE, Real Audio sowie die Plug-ins zum Anschauen von Videos in Formaten wie etwa AVI, MPEG und QuickTime.

Viele Plug-ins, zum Beispiel für Sound, digitales Video sowie der Flash-Player, werden bereits mit den Browsern ausgeliefert, andere muss der Benutzer nachträglich von der Website des Herstellers herunterladen und installieren. Sie sind oft kostenlos.

==== Plug-ins einbinden ====
Plug-ins werden mit dem obj ect-Element in die Webseite eingebunden. Sobald Sie eine Webseite mit einer ''object''-Anweisung aufrufen, ermittelt der Browser im Hintergrund zunächst, welches Plug-in für die Mediendateien installiert ist, und lädt dieses anschließend:

Sie binden Multimedia-Objekte auf Ihrer Webseite über das HTML-Element object ein.

Das Attribut ''data'' des ''object''-Elements enthält die Referenz zu der entsprechenden Objektdatei und muss in Anführungszeichen angegeben werden. Dabei spielt es keine Rolle, welches Format das Objekt hat. Dieses legen Sie über das Attribut type und das entsprechende MIME-Format fest. Die Attribute width und height bestimmen die Größe der anzuzeigenden Datei im Browser. Diese Attribute müssen Sie angeben, da ansonsten das Objekt nicht angezeigt werden kann. Mit der Angabe standby können Sie einen alternativen Text angeben, der angezeigt wird, bis das Objekt vollständig geladen ist.

Für einige eingebundene Elemente werden über das optionale Tag ''param'' ein oder mehrere Parameter übergeben. Dabei werden der Name (''name'') und der Wert (''value'') des gewünschten Parameters angegeben:

{{:inf:web:ik-38-1.jpg?700|}}

In der ersten Zeile binden Sie ein Video in die Webseite ein, das in einer Größe von 100 x 100 Pixeln dargestellt wird. Auch Webseiten lassen sich damit einbinden, wie die zweite Zeile zeigt. Die genaue Größe legen Sie über die beiden Attribute width und height fest.

==== HTML5: Sound und Videos direkt einbinden ====
In HTML5 können Sie multimediale Elemente wie Audio- und Videodateien einbinden, ohne dazu wie bisher Plug-ins wie QuickTime oder Flash zu benötigen.

Sie verwenden dazu die neuen HTML5-Elemente ''<audio>'' und ''<video>''. Dies hat gegenüber der zuvor erläuterten Lösung mit der Verwendung des ''object''-Elements eine Reihe von Vorteilen:
{{:inf:web:ik-39-1.jpg?700|}}


Beachten Sie, dass die <audio>- und <video>-Elemente nur von den folgenden Browsern unterstützt werden:

|Internet Explorer ab Version 9|Opera ab Version 10.5|
|Firefox ab Version 3.5|iPhone ab Version 1|
|Safari ab Version 3| Android ab Version 2|
|Google Chrome ab Version 3| |

Damit Nutzer mit älteren Browsern Ihre Multimedia-Dateien abspielen können, ist eine Lösung (Fallback) notwendig, die bei der ausführlichen Erläuterung der Elemente audio und video behandelt wird (vgl. Abschnitt "Sound in HTML einbinden").

Ein zusätzliches Problem ist, dass nicht alle Multimediaformate von jedem Browser ohne zusätzliche Software abgespielt werden können. So ist beispielsweise das weitverbreitete Audioformat MP3 patentgeschützt, sodass es nicht in jeden Browser implementiert werden kann (vgl. folgender Abschnitt).

\\

===== Multimediaformate kennenlernen =====
==== Codecs ====
Digitale Multimedia-Dateien sind normalerweise mehrere Megabyte groß. Deshalb könnten sie ohne Kompression (auch Komprimierung genannt) nicht über das Internet gestreamt werden. Dazu werden verschiedene sogenannte Codecs verwendet.

Codec ist ein Kunstwort aus Coder/Decoder. Es handelt sich dabei um ein Verfahren zur Komprimierung während der Aufzeichnung und der Dekomprimierung während des Abspielens von Mediendateien. Durch die Kompression wird die Audio-A/ideodatei kleiner. Dabei werden redundante Informationen sowohl zwischen den einzelnen Frames als auch in den Frames selbst entfernt.

Dadurch kommt es stets zu einem mehr oder minder ausgeprägten Daten- und damit Qualitätsverlust. Die Komprimierung ist stets ein Kompromiss zwischen möglichst geringer Dateigröße und möglichst hoher Qualität der Mediendatei.

Außerdem sind viele Codecs durch Patente geschützt, die zwar nicht den Endanwender betreffen, wohl aber Softwarehersteller, die diese Codecs nutzen möchten. Patentgeschützte Codecs bieten momentan eine deutlich höhere Kompressionsrate als patentfreie Codecs. Die Browser Mozilla und Opera setzen auf patentfreie Codecs mit geringerer Kompressionsrate. Die Browser von Microsoft, Google und Apple verwenden patentgeschützte Codecs mit besserer Kompressionsrate.

Deshalb sollten Sie Multimedia-Dateien in HTML5-Webseiten in mehreren Formaten anbieten. Im weiteren Verlauf dieses Kapitels erfahren Sie, wie das geht.
Die derzeit wichtigsten Audioformate/Codecs für das Web sind:


{{:inf:web:ik-40-1.jpg?700|}}

Die folgende Tabelle zeigt Ihnen die derzeit wichtigsten Videoformate/Codecs für das Web:

{{:inf:web:ik-40-2.jpg?700|}}

==== Multimedia-Dateien encodieren ====
Bevor Sie Ihre eigenen Multimedia-Dateien in HTML5 einbinden, müssen Sie sie also encodieren. Für .mp3 und .mp4 können Sie dazu beispielsweise den Adobe Media Encoder o.Ä. verwenden. Für das OGG-Format gibt es verschiedene frei verfügbare Encoder, die Sie sich aus dem Internet herunterladen können, beispielsweise Miro Video Converter.

\\

===== Sound in HTML5 einbinden =====
Zum Einbinden von Audio in HTML5 verwenden Sie das ''<audio>''-Element.

{{:inf:web:ik-40-3.jpg?700|}}

Folgende Attribute stehen für das audio-Element zur Verfügung:

{{:inf:web:ik-40-4.jpg?700|}}

**Beispiel: Audio in Webseite einbetten** 

++++ Quelltext |
<code html html5-audio1.html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Kalimba</title>
</head>

<body>
<h1>Kalimba </h1>
<div>
<audio preload controls src="Kalimba.ogg">
   <source src="kalimba.mp3">
</audio>
</div>
</body>
</code>

{{:inf:web:kap03:kalimba.mp3?linkonly|kalimba.mp3}}
++++

{{:inf:web:ik-41-1.jpg?700|}}

(1) Mit dem Tagpaar ''<audio> ... </audio>'' binden Sie eine Audio-Ressource in die Webseite ein. Mithilfe des Attributs ''src'' dieses Elements geben Sie die URL der abzuspielenden Audiodatei an. Das Attribut ''preload'' sorgt dafür, dass der Browser direkt beim Laden mit dem Download der Audiodatei beginnt. Das Attribut ''controls'' sorgt dafür, dass ein Audio-Player auf der Webseite angezeigt wird. Mit diesem kann die Audiodatei abgespielt, pausiert und angehalten sowie ihre Lautstärke verändert werden.

(2) Mit dem source-Element innerhalb des ''audio''-Elements können Sie den Namen einer alternativ abzuspielenden Audiodatei angeben, falls der Browser das Dateiformat der direkt im ''audio''-Element angegebenen Datei nicht interpretieren kann. Sie können hier auch mehrere ''source''-Elemente untereinander angeben.

Die Soundkonsole sieht in jedem Browser etwas anders aus.

{{:inf:web:ik-41-2.jpg?700|}}

Soundkonsole in Google Chrome

{{:inf:web:ik-41-3.jpg?700|}}

Soundkonsole im Microsoft Internet Explorer 9

Die direkt im audio-Element angegebene Sounddatei sollte ein Format haben, das der Browser auf jeden Fall erkennt. Zum Zeitpunkt der Erstellung des Buchs war unklar, welches Format sich durchsetzen wird. Sie können alternativ im Code z. B. zwei Formate gleichwertig nebeneinander angeben:

**Beispiel: Audio in Webseite einbetten** 

++++ Quelltext |
<code html html5-audio2.html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Kalimba</title>
</head>
<body>
<h1>Kalimba </h1>
<div>
<audio preload controls>
   <source src="kalimba.mp3">
   <source src="kalimba.ogg">
</audio>
</div>
</body>
</code>

{{:inf:web:kap03:kalimba.mp3?linkonly|kalimba.mp3}}, {{:inf:web:kap03:kalimba.ogg?linkonly|kalimba.ogg}}

++++


Das Element source kennt zwei Attribute:

{{:inf:web:ik-42-1.jpg?700|}}

Diese Lösung funktioniert nur für Browser, die HTML5 unterstützen. Möchten Sie Ihre Multimedia-Dateien für ein möglichst breites Publikum zugänglich machen, können Sie auf JavaScript-Code zurückgreifen, der eine Lösung für ältere Browser bietet - diese spielen statt des unbekannten ''audio''-Elements eine Flash-Datei ab. 


===== Videos einbinden =====
Zum Einbinden eines Videos in HTML5 verwenden Sie das ''video''-Element.

{{:inf:web:ik-42-2.jpg?700|}}

Folgende Attribute stehen für das ''video''-Element zur Verfügung:

{{:inf:web:ik-42-2.jpg?700|}}

**Beispiel: Video in Webseite einbetten** 

{{:inf:web:ik-43-1.jpg?700|}}

++++ Quelltext |
<code html html5-video.html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Diashow</title>
</head>
<body>
<h1>Diashow</h1>
<video src="diashow.ogv" width="436" height="320" 
       controls preload poster="diashow.jpg"> 
   <source src="diashow.mp4" type="video/ogg"></source> 
</video>
</body>
</html>
</code>

{{:inf:web:kap03:diashow.ogv?linkonly|diashow.ogv}}, {{:inf:web:kap03:diashow.jpg?linkonly|diashow.jpg}}, {{:inf:web:kap03:diashow.mp4?linkonly|diashow.mp4}}
++++

(1) Mit dem Tagpaar ''<video> ... </video>'' binden Sie eine Video-Ressource in die Webseite ein. Mithilfe des Attributs src geben Sie die URL der abzuspielenden Videodatei an. Das Attribut preload sorgt dafür, dass der Browser direkt beim Laden der Seite mit dem Download der Videodatei beginnt. Das Attribut controls sorgt dafür, dass ein Video-Player auf der Webseite angezeigt wird. Mit diesem kann die Videodatei abgespielt, pausiert und angehalten sowie ihre Lautstärke verändert werden. Das Attribut poster verweist auf eine Grafik, die angezeigt wird, falls das Video nicht abgespielt werden kann.

(2) Mit dem source-Element innerhalb des ''video''-Elements können Sie den Namen einer alternativ abzuspielenden Videodatei angeben, falls der Browser das Dateiformat der direkt im video-Element angegebenen Datei nicht kennt. Sie könnten hier auch mehrere source-Elemente untereinander angeben.

{{:inf:web:ik-43-2.jpg?400|}}\\
Video im Microsoft Internet Explorer 9

Die direkt im video-Element angegebene Videodatei sollte ein Format haben, das der Browser auf jeden Fall erkennt. Zum Zeitpunkt der Erstellung des Buchs war unklar, welches Format sich durchsetzen wird. Sie können alternativ im Code z. B. zwei Formate gleichwertig nebeneinander angeben:

**Beispiel: Video in Webseite einbetten**

{{:inf:web:ik-44-1.jpg?700|}}

++++ Quelltext |
<code html html5-video2.html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Diashow</title>
</head>
<body>
<h1>Diashow</h1>
<div>
<video width="436" height="320" controls preload poster="diashow.jpg">
   <source src="diashow.ogv" type="video/ogg"></source>
   <source src="diashow.mp4" type="video/mp4"></source>
</video>
</div>
</body>
</code>

{{:inf:web:kap03:diashow.jpg?linkonly|diashow.jpg}}, {{:inf:web:kap03:diashow.ogv?linkonly|diashow.ogv}}, {{:inf:web:kap03:diashow.mp4?linkonly|diashow.mp4}}
++++

Das Element ''source'' kennt zwei Attribute:

{{:inf:web:ik-44-2.jpg?700|}}