Audio und Video in HTML

Bis zur Veröffentlichung von HTML5 wurden die Audiodateien zur Webseiten durch die Integration von Grundton-Lauten durch das Tag <bgsound> hinzugefügt. Die Datei wurde während der Durchsicht der Seite abgespielt, und der Benutzer hatte keine Möglichkeit, sie auszuschalten. Mit der Einführung des neuen Tags <audio> in HTML5 werden Audiodateien mit einer integrierten Softwareschnittstelle hinzugefügt, und es müssen keine Module von Drittanbietern hinzugefügt werden.

Wie kann man Audiodateien zur Webseite hinzufügen

Zum Hinzufügen von Audiodateien zu einer Webseite wird das Element <audio> verwendet. Der Weg zur Audiodatei wird durch das Attribut src, angegeben, und das Attribut controls fügt eine Systemsteuerung (Startschaltfläche, Bildlauf, Lautstärkeregelung) hinzu.

Im Code sieht das so aus:

<audio src="name.ogg" controls></audio>

Audio-Codecs und Audio-Dateiformate

Da nicht alle Browser alle Audioformate unterstützen, werden Audiodateien mit speziellen Codecs (Programme zum Konvertieren von digitalen Daten in ein Audiodateiformat oder Audiostream) codiert und fügen die Dateien gleichzeitig über das Tag <source> mit dem Attribut src hinzu.

Bei der Angabe verschiedener Dateiformate wird es empfohlen, den MIME-Typ für jede Datei anzugeben, damit der Browser die von ihm unterstützte Datei lokalisieren kann. Die MIME-Typen werden mithilfe des Attributes type eingestellt.

<audio controls>
  <source src="name.ogg" type="audio/ogg">
  <source src="name.mp3" type="audio/mpeg">
</audio>

Die populärsten Audioformate sind folgende:

MP3 ist das populärste Audioformat, das verlustbehaftete Komprimierung verwendet und es Ihnen ermöglicht, die Dateigröße mehrmals zu reduzieren. Trotz ihrer Beliebtheit bei den Benutzern verwenden die Fernsehgesellschaften und Radiostationen modernere Codecs ISO-MPEG, wie AAC oder MPEG-H.

AAC (Advanced Audio Codec) ist ein geschlossener Codec, analog zu MP3, aber im Verglich mit dem Letzten bietet er eine höhere Klangqualität bei gleicher oder höherer Kompressionsrate.

Ogg Vorbis ist ein kostenloses Open-Source-Format, das in Firefox, Opera und Chrome unterstützt wird. Es bietet eine gute Klangqualität, wird aber von Hardware-Playern häufig nicht unterstützt.

Wie kann man Videodateien zur Webseite hinzufügen

Vor dem Erscheinen des HTML5-Standards wurden Plug-Ins von Drittanbietern wie QuickTime, RealPlayer oder Flash zum Hinzufügen von Videos zur Website verwendet. In HTML5 gibt es neues Tag <video>, das zum Hinzufügen von Video zur Webseite verwendet wird.

Im Code sieht das so aus:

<video src="example.webm." controls></video>

Das Attribut src zeigt den Weg zur Datei, und das Attribut controls wird für die Darstellung von Steuerelementen angezeigt.(Mehr über die Attribute des Tages <video>).

Die Videocodecs und Videodateiformate

Jeder Browser unterstützt einen bestimmten Codec. Um die Videowiedergabe in allen Browsern sicherzustellen, muss die Videodatei daher in verschiedenen Formaten vorliegen. Wie bei Audiodateien werden die Videodateiformate ins Element <source> angefangen von mehr bevorzugten Format platziert. Außerdem müss man für jede Videodatei einen MIME-Typ angeben, der durch das Attribut type angegeben wird.

Um sicherzustellen, dass der Browser Videodateien verarbeiten kann, erstellen Sie eine Datei .htaccess im Ordner, wo sich die Webseite, die die MIME-Typen für das Video definiert, befindet:

Beispiel

<video controls width="400" height="300">
  <source src="video.mp4" type="video/mp4"><!-- für Safari, IE9, iPhone, iPad, Android und Windows Phone 7 -->
  <source src="video.webm" type="video/webm"><!-- für Firefox4, Opera und Chrome -->
  <source src="video.ogv" type="video/ogg"><!-- für die alten Browser Firefox und Opera -->
</video>

Momentan gibt es 3 Hauptvideoformate: MP4/MPEG-4, OGG und WebM +. Die Codecs werden verwendet, um Videodaten zu komprimieren und wiederherzustellen.

Für die Videodatei MPEG-4 werden der Videocodec H.264 und der Audiocodec AAC verwendet. Um Codecs zu verwenden, müss man eine Lizenz erwerben.

Für die Videodatei Ogg werden der Videocodec Theora und der Open-Source-Audiocodec Vorbis verwendet.

Für die Videodateien im Format WebM + werden der Videocodec VP8 und der Audiocodec Vorbis verwendet. Es ist keine Lizenz erforderlich, um sie zu benutzen.

Wie kann man Untertitel und Kopftitel hinzufügen

Die Untertitel und Kopftitel werden zu Audio- und Videodateien mithilfe des Elements <track>, das als untergeordnetes Element von <audio> und <video> verwendet wird, hinzugefügt.