HTML video und audio

Der erste Schub an 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 nun zugunsten nativer HTML-Lösungen wie der <video>- und <audio>-Elemente sowie der Verfügbarkeit von JavaScript-APIs zu ihrer Steuerung obsolet. Wir werden hier nicht auf JavaScript eingehen – nur auf die grundlegenden Grundlagen, die mit HTML erreicht werden können.

Wir werden Ihnen nicht beibringen, wie man Audio- und Videodateien produziert – das erfordert ein völlig anderes Skillset. Wir haben Ihnen Beispiel-Audio- und -Videodateien und Beispielcode bereitgestellt, damit Sie selbst experimentieren können, falls Sie keine eigenen bekommen können.

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

Auf die gleiche Weise wie beim <img>-Element enthält das src (Quelle)-Attribut den 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 (das ist besonders kritisch für Menschen, die unter Epilepsie leiden). Sie müssen entweder das controls-Attribut verwenden, um die eigene Steuerungsoberfläche des Browsers einzubeziehen, oder Sie erstellen Ihre eigene Oberfläche mithilfe der entsprechenden JavaScript-API. Mindestens muss die Oberfläche eine Möglichkeit bieten, das Medium zu starten und zu stoppen sowie die Lautstärke anzupassen.

Der Absatz innerhalb der <video>-Tags

Dies wird als Fallback-Inhalt bezeichnet – dieser wird angezeigt, wenn der das Video zugreifende Browser das <video>-Element nicht unterstützt, wodurch wir eine Rückfallmöglichkeit 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 etwa so aussehen:

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

Es gibt ein Problem mit dem obigen Beispiel. Möglicherweise wird das Video nicht abgespielt, weil verschiedene Browser unterschiedliche Video- (und Audio-) Formate unterstützen. Glücklicherweise gibt es Möglichkeiten, dies zu verhindern.

Lassen Sie uns zunächst 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 Videotracks gespeichert sind, die das Medium bilden, zusammen mit Metadaten, die das Medium beschreiben, welche Codecs zum Codieren seiner Kanäle verwendet werden, usw.

Eine WebM-Datei, die einen Film enthält, der eine Hauptvideospur und eine alternative Blickwinkelspure enthält, plus Audiospuren für Englisch und Spanisch sowie Audiokommentare auf Englisch kann konzeptionell wie in der folgenden Abbildung dargestellt werden. Ebenfalls enthalten sind Textspuren mit geschlossenen Untertiteln für den Spielfilm, spanische Untertitel für den Film und englische Untertitel für den Kommentar.

Die Audio- und Videotracks im Container enthalten Daten im geeigneten Format für den zur Codierung des Mediums verwendeten Codec. Unterschiedliche Formate werden für Audiotracks im Gegensatz zu Videotracks verwendet. Jeder Audiotrack wird unter Verwendung eines Audio-Codecs codiert, während Videotracks mit (wie Sie wahrscheinlich schon erraten haben) einem Video-Codec codiert werden. Wie bereits erwähnt, unterstützen verschiedene Browser unterschiedliche Video- und Audioformate sowie unterschiedliche Containerformate (wie OGG, MP4 und WebM, die wiederum verschiedene Arten von Video und Audio enthalten können).

Zum Beispiel:

• Ein WebM-Container verpackt in der Regel Vorbis- oder Opus-Audio mit VP8/VP9-Video. Dies wird in allen modernen Browsern unterstützt, ältere Versionen funktionieren jedoch möglicherweise nicht.
• 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 verwendet tendenziell Vorbis-Audio und Theora-Video. Dies wird am besten in Firefox und Chrome unterstützt, wurde jedoch im Wesentlichen durch das qualitativ bessere WebM-Format abgelöst.

Es gibt einige Sonderfälle. Zum Beispiel wird in den meisten Fällen ein Codec-Daten in einem vereinfachten Container gespeichert oder sogar ohne Container abgespeichert. Ein solches Beispiel ist der FLAC-Codec, der meist in FLAC-Dateien gespeichert wird, die einfach rohe FLAC-Tracks sind.

Ein anderes Beispiel ist die beliebte "MP3-Datei". Eine "MP3-Datei" ist eine Audiodatei, die mit der MPEG-1 Audio Layer III-Komprimierung codiert wurde. Während sie Metadaten enthalten kann, wird sie nicht in einem separaten MPEG- oder MPEG-2-Container eingekapselt. Ihre weitreichende Unterstützung in den <audio>- und <video>-Elementen ist größtenteils ein Zeugnis ihrer anhaltenden Beliebtheit.

Ein Audioplayer wird dazu neigen, einen Audiotrack direkt abzuspielen, z. B. eine MP3- oder OGG-Datei. Diese benötigen keine Container.

Die im vorherigen Abschnitt beschriebenen Codecs existieren, um Video und Audio in handhabbare Dateien zu komprimieren, da rohe Audio- und Videodaten beide extrem groß sind. Jeder Webbrowser unterstützt eine Auswahl von Codecs, wie Vorbis oder H.264, die verwendet werden, um das komprimierte Audio und Video in Binärdaten umzuwandeln und zurück. Jeder Codec bietet seine eigenen Vor- und Nachteile, und jeder Container kann auch seine eigenen positiven und negativen Eigenschaften bieten, die Ihre Entscheidungen beeinflussen können, welchen Sie verwenden möchten.

Die Dinge werden etwas komplizierter, da nicht nur jeder Browser eine andere Menge an Container-Dateiformaten unterstützt, sondern auch nur eine bestimmte Auswahl an Codecs. Um die Wahrscheinlichkeit zu maximieren, dass Ihre Website oder App auf einem Browser eines Benutzers funktioniert, müssen Sie möglicherweise jede Mediendatei, die Sie verwenden, in mehreren Formaten bereitstellen. Wenn Ihre Seite und der Browser des Benutzers kein gemeinsames Medienformat haben, wird Ihr Medium nicht abgespielt.

Aufgrund der Komplexität, die sichergestellt werden muss, dass die Medien Ihrer App auf jeder Kombination von Browsern, Plattformen und Geräten, die Sie erreichen möchten, angezeigt werden können, kann die Auswahl der besten Kombination von Codecs und Container eine komplizierte Aufgabe sein. Siehe Auswahl des richtigen Containers für Hilfe bei der Auswahl des besten Container-Dateiformats für Ihre Bedürfnisse; ebenso siehe Auswahl eines Videocodecs und Auswahl eines Audiocodecs für Hilfe bei der Auswahl der ersten Mediencodecs, die Sie für Ihre Inhalte und Ihr Zielpublikum verwenden sollten.

Ein weiterer Punkt, der zu beachten ist: Mobile Browser können zusätzliche Formate unterstützen, die von ihren Desktop-Äquivalenten nicht unterstützt werden, genauso wie sie möglicherweise nicht alle gleichen Formate unterstützen, die die Desktop-Version unterstützt. Darüber hinaus können sowohl Desktop- als auch Mobile-Browser so konzipiert sein, dass sie die Medienwiedergabe auslagern (entweder für alle Medien oder nur für bestimmte Typen, die sie nicht intern handhaben können). Dies bedeutet, dass die Medienunterstützung teilweise von der installierten Software des Benutzers abhängt.

Wie machen wir das? Schauen Sie sich das folgende aktualisierte Beispiel (ebenfalls hier live ausprobieren) an:

<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 eigentlichen <video>-Tag entfernt und stattdessen separate <source>-Elemente eingefügt, die auf ihre eigenen Quellen verweisen. In diesem Fall wird der Browser die <source>-Elemente durchlaufen und dasjenige abspielen, für das er den Codec unterstützt. Die Einbindung von WebM- und MP4-Quellen sollte heutzutage ausreichen, um Ihr Video auf den meisten Plattformen und Browsern abzuspielen.

Jedes <source>-Element hat auch ein type-Attribut. Dies ist optional, aber es wird empfohlen, dass Sie es einschließen. Das type-Attribut enthält den MIME-Typ der Datei, die vom <source> angegeben wird, und Browser können das type verwenden, um sofort Videos zu überspringen, die sie nicht verstehen. Wenn das type nicht enthalten ist, laden und versuchen Browser, jede Datei abzuspielen, bis sie eine finden, die funktioniert, was offensichtlich Zeit in Anspruch nimmt und eine unnötige Nutzung von Ressourcen ist.

Schauen Sie sich unseren Leitfaden zu Medientypen und -formaten an, um Hilfe bei der Auswahl der besten Container und Codecs für Ihre Bedürfnisse zu erhalten und um die richtigen MIME-Typen herauszufinden, die für jedes Format angegeben werden müssen.

Es gibt eine Reihe anderer Funktionen, die Sie beim Anzeigen eines HTML-Videos einbeziehen können. Werfen Sie einen Blick auf unser nächstes Beispiel:

<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>

Das resultierende UI sieht ungefähr so aus:

Zu den Funktionen gehören:

width und height

Sie können die Videogröße entweder mit diesen Attributen oder mit CSS steuern. In beiden Fällen behalten die Videos ihr natives Breiten-Höhen-Verhältnis bei – bekannt als Seitenverhältnis. Wenn das Seitenverhältnis durch die Größen, die Sie festlegen, nicht beibehalten wird, wird das Video so weit wie möglich horizontal ausgefüllt, während der ungenutzte Raum standardmäßig mit einer festen Hintergrundfarbe gefüllt wird.

autoplay

Beginnt das Abspielen des Audio- oder Videoinhalts sofort beim Laden der restlichen Seite. Es wird empfohlen, keine automatisch abspielenden Videos (oder Audios) auf Ihren Websites zu verwenden, weil Benutzer dies als sehr störend empfinden können.

loop

Lässt das Video (oder Audio) automatisch neu starten, sobald es zu Ende ist. Dies kann ebenfalls störend sein, daher sollte es nur verwendet werden, wenn es wirklich notwendig ist.

muted

Spielt das Medium standardmäßig ohne Ton ab.

poster

Die URL eines Bildes, das vor dem Abspielen des Videos angezeigt wird. Es ist dazu gedacht, als Eröffnungsbild oder Werbebild angezeigt zu werden.

preload

Wird für das Puffern von großen Dateien verwendet; es kann einen von drei Werten annehmen:

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

Sie können das obige Beispiel live auf GitHub ausprobieren (siehe auch den Quellcode.) Beachten Sie, dass wir das autoplay-Attribut in der Live-Version nicht enthalten haben – wenn das Video startet, sobald die Seite lädt, verpassen Sie das Poster!

Das <audio>-Element funktioniert genau so wie das <video>-Element, mit ein paar 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 ergibt im Browser etwas Ähnliches wie das Folgende:

Dies nimmt weniger Platz als ein Videoplayer ein, da es keine visuelle Komponente gibt – Sie müssen nur Steuerungen anzeigen, um das Audio abzuspielen. Andere Unterschiede zum HTML-Video sind wie folgt:

• Das <audio>-Element unterstützt die width/height-Attribute nicht – wieder gibt es keine visuelle Komponente, daher gibt es nichts, dem eine Breite oder Höhe zugewiesen werden könnte.
• Es unterstützt auch nicht das poster-Attribut – wieder gibt es keine visuelle Komponente.

Abgesehen davon unterstützt <audio> alle Funktionen, die <video> bietet – überprüfen Sie die obigen Abschnitte, um mehr Informationen über diese Funktionen zu erhalten.

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

• Viele Menschen haben Hörbehinderungen (wie schwer hörend oder taub), sodass sie den Ton nicht klar hören können, wenn überhaupt.
• Andere können den Ton nicht hören, weil sie sich in lauten Umgebungen befinden (wie einer vollen Bar, in der ein Sportspiel gezeigt wird).
• Ähnlich ist es in Umgebungen, in denen das Abspielen des Tons ablenkend oder störend wäre (wie in einer Bibliothek oder wenn ein Partner versucht zu schlafen), hilfreich, Untertitel zu haben.
• Menschen, die die Sprache des Videos nicht sprechen, möchten möglicherweise ein Texttranskript oder sogar eine Übersetzung, um die Medieninhalte zu verstehen.

Wäre es nicht schön, wenn Sie diesen Leuten ein Transkript der im Audio-/Video-Inhalt gesprochenen Wörter zur Verfügung stellen könnten? Dank HTML-Video ist das möglich. Dazu verwenden wir das WebVTT-Dateiformat und das <track>-Element.

WebVTT ist ein Format zum Schreiben von Textdateien, die mehrere Zeichenfolgen von Text zusammen mit Metadaten enthalten, wie z. B. der Zeit im Video, zu der jede Textzeichenfolge angezeigt werden soll, und sogar begrenzte Stil- und Positionierungsinformationen. Diese Textzeichenfolgen werden als Cues bezeichnet, und es gibt verschiedene Arten von Cues, die für unterschiedliche Zwecke verwendet werden. Die häufigsten Cues sind:

Untertitel

Übersetzungen ausländischen Materials für Personen, die die im Audio gesprochenen Wörter nicht verstehen.

Beschriftungen

Synchronisierte Transkriptionen von Dialogen oder Beschreibungen signifikanter Geräusche, um Menschen, die den Ton nicht hören können, zu verleihen, zu verstehen, was vor sich geht.

Zeitlich abgestimmte Beschreibungen

Text, der vom Mediaplayer gesprochen werden sollte, um blinden oder anderweitig sehbehinderten Benutzern wichtige visuelle Elemente zu beschreiben.

Eine typische WebVTT-Datei sieht in etwa so aus:

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-Mediaplayback anzuzeigen, müssen Sie:

1. Speichern Sie die Datei als .vtt-Datei irgendwo, wo der Server sie bereitstellen kann (siehe unten), z. B. im selben Verzeichnis wie die HTML-Datei.
2. Verknüpfen Sie mit der .vtt-Datei mit dem <track>-Element. <track> sollte sich innerhalb von <audio> oder <video> befinden, jedoch 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 zu identifizieren, die sie suchen.

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 Browser sehen Sie ein Video, das Untertitel anzeigt, in etwa so:

Für weitere Details, einschließlich wie man Labels hinzufügt, lesen Sie Hinzufügen von Untertiteln und Untertiteln zu HTML-Video. Sie können das Beispiel finden, das zu diesem Artikel gehört, auf GitHub, 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 zum Aktivieren der Untertitel die "CC"-Schaltfläche drücken und eine Option auswählen müssen – English, Deutsch oder Español.

Für dieses aktive Lernen möchten wir, dass Sie (idealerweise) hinausgehen in die Welt und einige Ihrer eigenen Videos und Audios aufnehmen – die meisten Telefone erlauben Ihnen heutzutage, Audio und Video sehr einfach aufzunehmen, und sofern Sie die Aufnahmen auf Ihren Computer übertragen können, können Sie sie verwenden. Sie müssen möglicherweise einige Konvertierungen durchführen, um im Falle von Videos eine WebM- und MP4-Datei und im Falle von Audio eine MP3- und Ogg-Datei zu erhalten, aber es gibt genug Programme da draußen, um dies ohne zu viel Aufwand zu ermöglichen, wie Miro Video Converter und Audacity. Wir würden gerne, dass Sie es ausprobieren!

Sollten Sie keine Video- oder Audiomaterialien beschaffen können, können Sie gerne unsere Beispiel-Audio- und -Videodateien nutzen, um diese Übung durchzuführen. Sie können auch unseren Beispielcode zur Referenz nutzen.

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 gleichen Verzeichnis, genannt index.html.
3. Fügen Sie der Seite <audio>- und <video>-Elemente hinzu; lassen Sie sie die Standardsteuerungen des Browsers anzeigen.
4. Geben Sie beiden <source>-Elemente, damit die Browser das für sie am besten unterstützte Audioformat finden und laden. Diese sollten Attribute wie type enthalten.
5. Geben Sie dem <video>-Element ein Poster, das angezeigt wird, bevor das Video abgespielt wird. Haben Sie Spaß beim Erstellen Ihres eigenen Posterbildes.

Als zusätzlichen Bonus können Sie versuchen, Textspuren zu recherchieren und herauszufinden, wie Sie Ihren Videos Untertitel hinzufügen.

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich an die wichtigsten Informationen erinnern? Sie finden einige weiterführende Tests, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen – siehe Testen Sie Ihre Fähigkeiten: Multimedia und Einbettung.

Und das war's – wir hoffen, Sie hatten Spaß daran, mit Video und Audio auf Webseiten zu spielen! Als nächstes präsentieren wir Ihnen eine Herausforderung, um Ihre Fähigkeiten mit HTML-Medien zu testen.

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