HTML Video und Audio

Der erste Zustrom von Online-Videos und Audio wurde durch proprietäre, plugin-basierte Technologien wie Flash und Silverlight ermöglicht. Beide hatten Sicherheits- und Zugänglichkeitsprobleme und sind inzwischen zugunsten nativer HTML-Lösungen, wie den <video>- und <audio>-Elementen, und der Verfügbarkeit von JavaScript-APIs zur Steuerung dieser obsolet. Wir werden uns hier nicht mit JavaScript beschäftigen, sondern nur mit den grundlegenden Grundlagen, die mit HTML erreicht werden können.

Wir werden Ihnen nicht beibringen, wie Sie Audio- und Videodateien produzieren — das erfordert eine völlig andere Fähigkeit. Wir haben Ihnen Beispiel-Audio- und Videodateien und Beispielcode zur Verfügung gestellt, damit Sie selbst experimentieren können, falls Sie Ihre eigenen nicht zur Hand haben.

Das <video>-Element ermöglicht es Ihnen, ein Video sehr einfach einzubetten. Ein wirklich einfaches Beispiel sieht so aus:

<video src="rabbit320.webm" controls>
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="rabbit320.webm">link to the video</a> instead.
  </p>
</video>

Die zu beachtenden Merkmale sind:

src

In gleicher Weise wie beim <img>-Element enthält das src- (Quelle-) Attribut einen Pfad zu dem Video, das Sie einbetten möchten. Es funktioniert genau gleich.

controls

Benutzer müssen in der Lage sein, die Wiedergabe von Video und Audio zu steuern (dies ist besonders wichtig für Menschen, die Epilepsie haben.) Sie müssen entweder das controls-Attribut verwenden, um die eigene Steueroberfläche des Browsers einzuschließen, oder Ihre Oberfläche mit der entsprechenden JavaScript-API erstellen. Mindestens muss die Oberfläche eine Möglichkeit bieten, das Medium zu starten und zu stoppen und die Lautstärke anzupassen.

Der Absatz innerhalb der <video>-Tags

Dies wird als Fallback-Inhalt bezeichnet — dieser wird angezeigt, wenn der Browser, der auf die Seite zugreift, das <video>-Element nicht unterstützt, sodass wir einen Fallback für ältere Browser bereitstellen können. Dies kann alles sein, was Sie möchten; in diesem Fall haben wir einen direkten Link zur Videodatei bereitgestellt, sodass der Benutzer unabhängig vom verwendeten Browser zumindest auf irgendeine Weise darauf zugreifen kann.

Das eingebettete Video wird ungefähr so aussehen:

Sie können das Beispiel hier live ausprobieren (siehe auch der Quellcode.)

Es gibt ein Problem mit dem obigen Beispiel. Es ist möglich, dass das Video für Sie nicht abgespielt wird, da verschiedene Browser unterschiedliche Video- (und Audio-) Formate unterstützen. Glücklicherweise gibt es Dinge, die Sie tun können, um zu verhindern, dass dies ein Problem darstellt.

Lassen Sie uns zuerst die Terminologie schnell durchgehen. Formate wie OGG, WAV, MP4 und WebM werden als Containerformate bezeichnet. Sie definieren eine Struktur, in der die Audio- und/oder Videospuren, aus denen das Medium besteht, zusammen mit Metadaten gespeichert sind, die das Medium und die zur Kodierung seiner Kanäle verwendeten Codecs beschreiben.

Eine WebM-Datei, die einen Film enthält, der eine Hauptvideospur und eine alternative Winkelspur, sowie Audio sowohl für Englisch als auch Spanisch hat, zusätzlich zu Audio für eine englische Kommentarspur, kann im unten stehenden Diagramm konzeptionell dargestellt werden. Ebenfalls enthalten sind Textspuren, die verschlossene Untertitel für den Spielfilm, spanische Untertitel für den Film und englische Untertitel für den Kommentar enthalten.

Die Audio- und Videospuren innerhalb des Containers halten Daten im geeigneten Format für den zur Kodierung des Mediums verwendeten Codec. Unterschiedliche Formate werden für Audiospuren im Vergleich zu Videospuren verwendet. Jede Audiospur ist mit einem Audio-Codec kodiert, während Videospuren unter Verwendung (wie Sie wahrscheinlich erraten haben) eines Video-Codecs kodiert werden. Wie bereits erwähnt, unterstützen verschiedene Browser unterschiedliche Video- und Audioformate und unterschiedliche Containerformate (wie OGG, MP4 und WebM, die wiederum verschiedene Arten von Video und Audio enthalten können).

Zum Beispiel:

• Ein WebM-Container verpackt typischerweise Vorbis- oder Opus-Audio mit VP8/VP9-Video. Dies wird in allen modernen Browsern unterstützt, obwohl ältere Versionen möglicherweise nicht funktionieren.
• Ein MP4-Container verpackt häufig AAC- oder MP3-Audio mit H.264-Video. Dies wird ebenfalls in allen modernen Browsern unterstützt.
• Der Ogg-Container tendiert dazu, Vorbis-Audio und Theora-Video zu verwenden. Dies wird am besten in Firefox und Chrome unterstützt, wurde jedoch im Grunde durch das besser Qualität WebM-Format ersetzt.

Es gibt einige Sonderfälle. Zum Beispiel wird für einige Arten von Audio-Codec-Daten oft ohne Container oder mit einem vereinfachten Container gespeichert. Ein solches Beispiel ist der FLAC-Codec, der am häufigsten in FLAC-Dateien gespeichert wird, bei denen es sich einfach um rohe FLAC-Tracks handelt.

Ein weiteres Beispiel ist die allseits beliebte "MP3-Datei". Eine "MP3-Datei" ist eine Audiodatei, die mit MPEG-1 Audio Layer III-Kompression kodiert ist. Obwohl sie Metadaten enthalten kann, ist sie nicht innerhalb eines separaten MPEG- oder MPEG-2-Containers gekapselt. Die weit verbreitete Unterstützung in den <audio>- und <video>-Elementen zeugt weitgehend von ihrer anhaltenden Beliebtheit.

Ein Audio-Player wird dazu neigen, eine Audiospur direkt abzuspielen, z.B. eine MP3- oder Ogg-Datei. Diese benötigen keine Container.

Die Codecs, die im vorherigen Abschnitt beschrieben wurden, existieren, um Video und Audio in handhabbare Dateien zu komprimieren, da sowohl Roh-Audio als auch Video außerordentlich groß sind. Jeder Webbrowser unterstützt eine Auswahl an Codecs, wie Vorbis oder H.264, die verwendet werden, um das komprimierte Audio und Video in Binärdaten zu konvertieren und wieder zurück. Jeder Codec bietet seine eigenen Vorteile und Nachteile, und jeder Container kann auch seine eigenen positiven und negativen Eigenschaften bieten, die Ihre Entscheidungen bei der Auswahl beeinflussen.

Die Dinge werden etwas komplizierter, da nicht nur jeder Browser eine andere Sammlung von Datei-Containerformaten unterstützt, sondern auch jeder eine andere Auswahl von Codecs unterstützt. Um die Wahrscheinlichkeit zu maximieren, dass Ihre Website oder App auf dem Browser eines Benutzers funktioniert, müssen Sie möglicherweise jede von Ihnen verwendete Mediendatei in mehreren Formaten bereitstellen. Wenn Ihre Site und der Browser des Benutzers kein gemeinsames Medienformat haben, wird Ihr Medium nicht abgespielt.

Aufgrund der Komplexität der Sicherstellung, dass die Medien Ihrer App in jeder Kombination aus Browsern, Plattformen und Geräten, die Sie erreichen möchten, angezeigt werden, kann die Wahl der besten Kombination aus Codecs und Containern eine komplizierte Aufgabe sein. Siehe Auswahl des richtigen Containers für Hilfe bei der Auswahl des für Ihre Anforderungen am besten geeigneten Container-Dateiformats; ebenso siehe Auswahl eines Video-Codecs und Auswahl eines Audio-Codecs für Hilfe bei der Auswahl der ersten Mediä-Codec für Ihren Inhalt und Ihr Zielpublikum.

Ein weiteres zu beachtendes Detail: Mobile Browser können zusätzliche Formate unterstützen, die nicht von ihren Desktop-Äquivalenten unterstützt werden, genauso wie sie möglicherweise nicht alle Formate unterstützen, die die Desktop-Version unterstützt. Darüber hinaus könnten sowohl Desktop- als auch mobile Browser so gestaltet sein, dass sie die Medienwiedergabe auslagern (entweder für alle Medien oder nur für bestimmte Typen, die sie nicht intern verarbeiten können). Dies bedeutet, dass die Medienunterstützung teilweise davon abhängt, welche Software der Benutzer installiert hat.

Wie machen wir das also? Schauen Sie sich das folgende aktualisierte Beispiel an (probieren Sie es hier live aus, ebenfalls):

<video controls>
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    Your browser doesn't support this video. Here is a
    <a href="rabbit320.mp4">link to the video</a> instead.
  </p>
</video>

Hier haben wir das src-Attribut aus dem tatsächlichen <video>-Tag entfernt und stattdessen separate <source>-Elemente eingebettet, die auf ihre eigenen Quellen verweisen. In diesem Fall durchläuft der Browser die <source>-Elemente und spielt das erste ab, für das er den Codec zur Unterstützung hat. Das Einbeziehen von WebM- und MP4-Quellen sollte heutzutage ausreichen, um Ihr Video auf den meisten Plattformen und Browsern abzuspielen.

Jedes <source>-Element hat ebenfalls ein type-Attribut. Dieses ist optional, aber es wird empfohlen, dass Sie es hinzufügen. Das type-Attribut enthält den MIME-Typ der Datei, die durch das <source> spezifiziert wird, und Browser können die type-Angabe verwenden, um sofort Videos zu überspringen, die sie nicht verstehen. Wenn type nicht enthalten ist, laden Browser jede Datei und versuchen, sie abzuspielen, bis sie eine finden, die funktioniert, was offensichtlich Zeit kostet und eine unnötige Nutzung von Ressourcen darstellt.

Verweisen Sie auf unseren Leitfaden zu Medientypen und Formaten für Hilfe bei der Auswahl der besten Container und Codecs für Ihre Bedürfnisse, sowie um die richtigen MIME-Typen nachzuschlagen, die für jeden spezifiert werden sollen.

Es gibt eine Reihe anderer Funktionen, die Sie beim Anzeigen eines HTML-Videos einschließen können. Sehen Sie sich unser nächstes Beispiel an:

<video
  controls
  width="400"
  height="400"
  autoplay
  loop
  muted
  preload="auto"
  poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    Your browser doesn't support this video. Here is a
    <a href="rabbit320.mp4">link to the video</a> instead.
  </p>
</video>

Die resultierende Benutzeroberfläche sieht ungefähr so aus:

Merkmale sind:

width und height

Sie können die Videogröße entweder mit diesen Attributen oder mit CSS steuern. In beiden Fällen behalten Videos ihr natives Breiten-Höhen-Verhältnis bei — bekannt als das Seitenverhältnis. Wenn das Seitenverhältnis nicht durch die von Ihnen festgelegten Größen beibehalten wird, wächst das Video horizontal, um den Raum zu füllen, und der nicht gefüllte Raum wird standardmäßig einfach mit einer soliden Hintergrundfarbe versehen.

autoplay

Lässt das Audio oder Video sofort starten, während der Rest der Seite geladen wird. Es wird empfohlen, keine automatisch abspielenden Videos (oder Audios) auf Ihren Seiten zu verwenden, da Benutzer dies wirklich als störend empfinden können.

loop

Lässt das Video (oder Audio) immer wieder abspielen, sobald es endet. Das kann auch störend sein, also nur verwenden, wenn es wirklich notwendig ist.

muted

Lässt das Medium standardmäßig ohne Ton abspielen.

poster

Die URL eines Bildes, das angezeigt wird, bevor das Video abgespielt wird. Es ist dazu gedacht, für eine Startbildschirm- oder Werbebildschirmanzeige verwendet zu werden.

preload

Wird zum Puffern großer Dateien verwendet; es kann einer von drei Werten haben:

• "none" puffert die Datei nicht
• "auto" puffert die Mediendatei
• "metadata" puffert nur die Metadaten der Datei

Sie können das obige Beispiel bei GitHub live abspielen (auch den Quellcode ansehen.) Beachten Sie, dass wir im Live-Demo das autoplay-Attribut nicht enthalten haben — wenn das Video sofort startet, nachdem die Seite geladen ist, sehen Sie das Posterbild nicht!

Das <audio>-Element funktioniert genauso wie das <video>-Element, mit einigen kleinen Unterschieden, die unten beschrieben werden. Ein typisches Beispiel könnte so aussehen:

<audio controls>
  <source src="viper.mp3" type="audio/mp3" />
  <source src="viper.ogg" type="audio/ogg" />
  <p>
    Your browser doesn't support this audio file. Here is a
    <a href="viper.mp3">link to the audio</a> instead.
  </p>
</audio>

Dies erzeugt im Browser etwas wie Folgendes:

Diese nimmt weniger Platz als ein Videoplayer ein, da kein visuelles Element vorhanden ist — Sie müssen lediglich Steuerungen für die Audiowiedergabe anzeigen. Andere Unterschiede zu HTML-Video sind:

• Das <audio>-Element unterstützt nicht die width/height-Attribute — erneut, es gibt keine visuelle Komponente, der Sie eine Breite oder Höhe zuweisen könnten.
• Es unterstützt auch nicht das poster-Attribut — erneut, keine visuelle Komponente.

Ansonsten unterstützt <audio> alle gleichen Funktionen wie <video> — überprüfen Sie die obigen Abschnitte für weitere Informationen darüber.

Jetzt werden wir ein etwas fortgeschritteneres Konzept besprechen, das wirklich nützlich ist, zu wissen. Viele Menschen können oder wollen die Audio-/Video-Inhalte, die sie im Web finden, zumindest zu bestimmten Zeiten nicht hören. Zum Beispiel:

• Viele Menschen haben auditive Beeinträchtigungen (wie Schwerhörigkeit oder Gehörlosigkeit), sodass sie das Audio nicht klar hören können, wenn überhaupt.
• Andere können das Audio nicht hören, weil sie sich in lauten Umgebungen befinden (wie in einer überfüllten Bar, wenn ein Sportspiel gezeigt wird).
• In ähnlicher Weise kann in Umgebungen, in denen das Abspielen des Audios als Ablenkung oder Störung angesehen würde (wie in einer Bibliothek oder wenn ein Partner versucht zu schlafen), das Vorhandensein von Untertiteln sehr nützlich sein.
• Menschen, die die Sprache des Videos nicht sprechen, möchten möglicherweise ein Texttranskript oder sogar eine Übersetzung, um ihnen zu helfen, die Medieninhalte zu verstehen.

Wäre es nicht schön, diesen Menschen ein Transkript der im Audio/Video gesprochenen Worte zur Verfügung zu stellen? Nun, dank HTML-Video können Sie das. Dazu verwenden wir das WebVTT-Dateiformat und das <track>-Element.

WebVTT ist ein Format zum Schreiben von Textdateien, die mehrere Textstrings zusammen mit Metadaten enthalten, wie die Zeit im Video, zu der jeder Textstring angezeigt werden sollte, und sogar begrenzte Styling-/Positionierungsinformationen. Diese Text-Strings werden als Cues bezeichnet, und es gibt mehrere Arten von Cues, die für verschiedene Zwecke verwendet werden. Die häufigsten Cues sind:

Untertitel

Übersetzungen von fremdsprachigem Material, für Personen, die die im Audio gesprochenen Wörter nicht verstehen.

Untertitel (captions)

Synchronisierte Abschriften von Dialogen oder Beschreibungen bedeutender Geräusche, um Menschen, die das Audio nicht hören können, zu helfen, zu verstehen, was vor sich geht.

zeitlich begrenzte Beschreibungen

Text, der vom Mediaplayer gesprochen werden sollte, um wichtige visuelle Elemente für blinde oder anderweitig sehbehinderte Benutzer zu beschreiben.

Eine typische WebVTT-Datei könnte so aussehen:

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

…

Um dies zusammen mit der HTML-Medienwiedergabe anzuzeigen, müssen Sie:

1. Speichern Sie sie als .vtt-Datei an einem Ort, von dem der Server sie bereitstellen kann (siehe unten), z. B. im selben Verzeichnis wie die HTML-Datei.
2. Verweisen Sie mit dem <track>-Element auf die .vtt-Datei. <track> sollte innerhalb von <audio> oder <video> platziert werden, aber nach allen <source>-Elementen. Verwenden Sie das kind-Attribut, um anzugeben, ob die Cues subtitles, captions oder descriptions sind. Verwenden Sie außerdem srclang, um dem Browser mitzuteilen, in welcher Sprache Sie die Untertitel geschrieben haben. Fügen Sie schließlich label hinzu, um den Lesern zu helfen, die Sprache, die sie suchen, zu identifizieren.

Hier ist ein Beispiel:

<video controls>
  <source src="example.mp4" type="video/mp4" />
  <source src="example.webm" type="video/webm" />
  <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish" />
</video>

Um dies auszuprobieren, müssen Sie die Dateien auf einem lokalen HTTP-Server hosten. Im Ausgabebrowser sehen Sie ein Video, das Untertitel anzeigt, ähnlich wie hier:

Für weitere Details, einschließlich wie man Labels hinzufügt, lesen Sie bitte Hinzufügen von Untertiteln zu HTML5-Video. Sie können das Beispiel auf GitHub finden, das zu diesem Artikel gehört, geschrieben von Ian Devlin (sehen Sie sich auch den Quellcode an.) Dieses Beispiel verwendet etwas JavaScript, um Benutzern die Auswahl zwischen verschiedenen Untertiteln zu ermöglichen. Beachten Sie, dass Sie, um die Untertitel einzuschalten, die "CC"-Taste drücken und eine Option auswählen müssen — Englisch, Deutsch oder Spanisch.

Für dieses aktive Lernen würden wir (idealerweise) Sie gerne dazu ermutigen, raus in die Welt zu gehen und einige Ihrer eigenen Videos und Audios aufzunehmen — die meisten Telefone ermöglichen es Ihnen heutzutage, Audio und Video sehr leicht aufzunehmen und, vorausgesetzt, Sie können es auf Ihren Computer übertragen, können Sie es verwenden. Möglicherweise müssen Sie einige Konvertierungen durchführen, um mit einem WebM und MP4 im Falle von Videos und einer MP3 und Ogg im Falle von Audio zu enden, aber es gibt genügend Programme, die es Ihnen ermöglichen, dies ohne allzu viele Schwierigkeiten zu tun, wie z.B. Miro Video Converter und Audacity. Wir würden uns freuen, wenn Sie es versuchen würden!

Sollten Sie kein Video oder Audio zur Hand haben, können Sie gerne unsere Beispiel-Audio- und Videodateien verwenden, um diese Übung durchzuführen. Sie können auch unseren Beispielcode als Referenz verwenden.

Wir möchten, dass Sie:

1. Speichern Sie Ihre Audio- und Videodateien in einem neuen Verzeichnis auf Ihrem Computer.
2. Erstellen Sie eine neue HTML-Datei im selben Verzeichnis, die index.html genannt wird.
3. Fügen Sie der Seite <audio>- und <video>-Elemente hinzu und lassen Sie sie die Standard-Browsersteuerungen anzeigen.
4. Geben Sie beiden <source>-Elemente, sodass die Browser das bevorzugte Audioformat finden und laden. Diese sollten type-Attribute enthalten.
5. Geben Sie dem <video>-Element ein Poster, das angezeigt wird, bevor das Video gestartet wird. Gestalten Sie Ihr eigenes Posterbild.

Zum Bonus könnten Sie versuchen, Textspuren zu recherchieren und herauszufinden, wie Sie Ihrem Video einige Untertitel hinzufügen können.

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich noch an die wichtigsten Informationen erinnern? Sie finden einige weitere Tests, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie fortfahren — siehe Testen Sie Ihr Wissen: Multimedia und Einbettung.

Und das war's — wir hoffen, Sie hatten Spaß daran, mit Video und Audio auf Webseiten zu experimentieren! Als nächstes werden wir Sie mit einer Herausforderung konfrontieren, um Ihre Fähigkeiten mit HTML-Medien zu testen.

• Zurück
• Übersicht: Strukturierung von Inhalten mit HTML
• Weiter