Video- und Audioinhalte

Die erste Welle 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 nun zugunsten nativer HTML-Lösungen wie <video>- und <audio>-Elemente sowie der Verfügbarkeit von JavaScript-APIs zur Steuerung dieser Technologien veraltet. 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 eine völlig andere Fähigkeitenpalette. Wir haben für Ihr eigenes Experimentieren Beispiel-Audio- und Videodateien und Beispielcode bereitgestellt, falls Sie keine eigenen beschaffen können.

Das <video>-Element ermöglicht es Ihnen, sehr einfach ein Video 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 bemerkenswerten Merkmale sind:

src

Analog zum <img>-Element enthält das src- (Quell-)Attribut einen Pfad zu dem Video, das Sie einbetten möchten. Es funktioniert genau auf die gleiche Weise.

controls

Benutzer müssen die Video- und Audiowiedergabe steuern können (es ist besonders kritisch für Menschen, die an Epilepsie leiden). Sie müssen entweder das controls-Attribut verwenden, um die eigene Steuerungsschnittstelle des Browsers einzuschließen, oder Ihre Schnittstelle mit der entsprechenden JavaScript API gestalten. Mindestens muss die Schnittstelle eine Möglichkeit zum Starten und Stoppen der Medien sowie zum Anpassen der Lautstärke enthalten.

Der Absatz innerhalb der <video>-Tags

Dies wird als Fallback-Inhalt bezeichnet — dieser wird angezeigt, wenn der den die Seite aufrufende Browser das <video>-Element nicht unterstützt, sodass wir eine Rückfallebene für ältere Browser bereitstellen können. Dies kann alles Mögliche sein; in diesem Fall haben wir einen direkten Link zur Videodatei bereitgestellt, damit der Benutzer sie zumindest auf irgendeine Weise zugreifen kann, unabhängig davon, welchen Browser er verwendet.

Das eingebettete Video sieht wahrscheinlich so aus:

Sie können das Beispiel live ausprobieren (siehe auch den 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. Zum Glück gibt es Dinge, die Sie tun können, um dies zu verhindern.

Inhalte einer Mediendatei

Zuerst gehen wir schnell die Terminologie durch. Formate wie MP3, 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 beschreiben, welche Codecs zur Kodierung seiner Kanäle verwendet werden und so weiter.

Eine WebM-Datei, die ein Video enthält, welches eine Hauptvideospur und eine alternative Kameraperspektive enthält sowie Audio für Englisch und Spanisch und zusätzlich einen Audiokommentar auf Englisch, kann wie im folgenden Diagramm konzipiert werden. Außerdem sind Textspuren enthalten, die 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 enthalten Daten im geeigneten Format für den zur Kodierung dieses Mediums verwendeten Codec. Verschiedene Formate werden für Audio- versus Videospuren verwendet. Jede Audiospur wird mit einem Audiocodec codiert, während Videospuren unter Verwendung eines (wie Sie wahrscheinlich vermutet haben) Videocodec codiert werden. Wie wir bereits besprochen haben, unterstützen verschiedene Browser unterschiedliche Video- und Audioformate sowie unterschiedliche Containerformate (wie MP3, MP4 und WebM, die wiederum unterschiedliche 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 oft 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 genommen durch das qualitativ hochwertigere WebM-Format ersetzt.

Es gibt einige Sonderfälle. Beispielsweise wird für einige Audioarten die Codierung häufig ohne Container oder mit einem vereinfachten Container gespeichert. Ein solches Beispiel ist der FLAC-Codec, der am häufigsten in FLAC-Dateien gespeichert wird, die nur rohe FLAC-Tracks sind.

Ein weiteres Beispiel ist die immer beliebte MP3-Datei. Eine „MP3-Datei“ ist tatsächlich ein MPEG-1 Audio Layer III (MP3) Audiotrack, der innerhalb eines MPEG- oder MPEG-2-Containers gespeichert ist. Das ist besonders interessant, da, obwohl die meisten Browser die Verwendung von MPEG-Medien in den <video>- und <audio>-Elementen nicht unterstützen, sie MP3 aufgrund seiner Beliebtheit dennoch unterstützen können.

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

Unterstützung von Mediendateien in Browsern

Die im vorherigen Abschnitt beschriebenen Codecs existieren, um Video und Audio in handhabbare Dateien zu komprimieren, da rohe Audio- und Videodateien beide außerordentlich groß sind. Jeder Webbrowser unterstützt eine Reihe von Codecs, wie Vorbis oder H.264, die verwendet werden, um die komprimierten Audio- und Videodaten in Binärdaten umzuwandeln und zurück. Jeder Codec bietet seine eigenen Vor- und Nachteile, und jeder Container kann ebenfalls seine eigenen positiven und negativen Merkmale haben, die Ihre Entscheidungen über welche zu verwenden beeinflussen.

Die Dinge werden etwas komplizierter, da nicht nur jeder Browser ein unterschiedliches Set von Containerdateiformaten unterstützt, sondern auch eine unterschiedliche Auswahl an Codecs. Um die Wahrscheinlichkeit zu maximieren, dass Ihre Website oder App im Browser eines Benutzers funktioniert, müssen Sie möglicherweise jede von Ihnen verwendete Mediendatei in mehreren Formaten bereitstellen. Wenn Ihre Website und der Browser des Benutzers kein gemeinsames Medienformat haben, werden Ihre Medien nicht abgespielt.

Aufgrund der Komplexität, um sicherzustellen, dass die Medien Ihrer App auf jeder Kombination von Browsern, Plattformen und Geräten, die Sie erreichen möchten, angesehen werden können, kann die Wahl der besten Kombination von Codecs und Containern eine komplizierte Aufgabe sein. Lesen Sie Die Wahl des richtigen Containers, um Hilfe bei der Auswahl des Containerdateiformats zu erhalten, das am besten für Ihre Bedürfnisse geeignet ist; lesen Sie auch Die Wahl eines Video-Codecs und Die Wahl eines Audio-Codecs, um Hilfe bei der Auswahl der ersten Mediencodecs für Ihre Inhalte und Zielgruppe zu erhalten.

Ein weiterer Punkt, den Sie beachten sollten: Mobile Browser unterstützen möglicherweise zusätzliche Formate, die nicht von ihren Desktop-Äquivalenten unterstützt werden, genauso wie sie möglicherweise nicht alle Formate, die die Desktop-Version unterstützt, unterstützen. Darüber hinaus können sowohl Desktop- als auch mobile Browser so ausgelegt sein, dass sie die Medienwiedergabe auslagern (entweder für alle Medien oder nur für bestimmte Typen, die sie intern nicht handhaben können). Das bedeutet, dass die Unterstützung von Medien teilweise davon abhängt, welche Software der Benutzer installiert hat.

Wie machen wir das also? Sehen Sie sich das folgende aktualisierte Beispiel (probiere es hier live aus) 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 durchgehen und das erste abspielen, das er mit dem Codec unterstützen kann. Das Einfügen von WebM- und MP4-Quellen sollte ausreichen, um Ihr Video heutzutage auf den meisten Plattformen und Browsern abzuspielen.

Jedes <source>-Element hat auch ein type-Attribut. Dies ist optional, jedoch wird empfohlen, es hinzuzufügen. Das type-Attribut enthält den MIME-Typ der Datei, die durch <source> angegeben wird, und Browser können das type nutzen, um Videos, die sie nicht verstehen, sofort zu überspringen. Wenn type nicht enthalten ist, laden die Browser die Datei herunter und versuchen sie nacheinander abzuspielen, bis sie eine finden, die funktioniert, was offensichtlich Zeit kostet und eine unnötige Verwendung von Ressourcen darstellt.

Lesen Sie unseren Leitfaden zu Medientypen und Formaten, um Hilfe bei der Auswahl der besten Container und Codecs für Ihre Bedürfnisse zu erhalten sowie um sich über die richtigen MIME-Typen, die jeweils spezifiziert werden sollen, zu informieren.

Es gibt eine Reihe anderer Features, die Sie beim Anzeigen eines HTML-Videos hinzufügen 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:

Die Merkmale umfassen:

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 — bekannt als Seitenverhältnis. Wenn das Seitenverhältnis nicht mit den von Ihnen festgelegten Größen beibehalten wird, wächst das Video, um den Raum horizontal zu füllen, und der nicht gefüllte Raum erhält standardmäßig eine einheitliche Hintergrundfarbe.

autoplay

Lässt die Audio- oder Videowiedergabe 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 störend finden können.

loop

Lässt das Video (oder Audio) jedes Mal, wenn es endet, von vorne beginnen. Dies kann ebenfalls störend sein, verwenden Sie es also nur, wenn es wirklich notwendig ist.

muted

Lässt die Medien standardmäßig ohne Ton abspielen.

poster

Die URL eines Bildes, das angezeigt wird, bevor das Video abgespielt wird. Es ist gedacht, um als Splash-Screen oder Werbebild zu dienen.

preload

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

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

Sie können das obige Beispiel live auf GitHub abspielen (siehe auch den Quellcode). Beachten Sie, dass wir in der Live-Version das autoplay-Attribut nicht eingebaut haben – wenn das Video sofort nach dem Laden der Seite abgespielt wird, sehen Sie das Poster nicht!

Das <audio>-Element funktioniert genau wie das <video>-Element, mit ein paar kleinen Unterschieden, die unten aufgeführt sind. 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>

Das ergibt in einem Browser etwas in dieser Art:

Es nimmt weniger Platz ein als ein Videoplayer, da es keine visuelle Komponente gibt – Sie müssen nur Steuerelemente für die Wiedergabe des Audios anzeigen. Weitere Unterschiede zu HTML-Video sind wie folgt:

• Das <audio>-Element unterstützt nicht die width/height-Attribute – es gibt wieder 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 keine visuelle Komponente.

Ansonsten unterstützt <audio> alle gleichen Features wie <video> – lesen Sie die obigen Abschnitte für weitere Informationen zu diesen.

Jetzt werden wir ein etwas fortgeschritteneres Konzept besprechen, von dem es wirklich nützlich ist, zu wissen. Viele Menschen können oder möchten 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 können in Umgebungen, in denen das Abspielen des Audios eine Ablenkung oder Störung darstellen würde (wie in einer Bibliothek oder wenn ein Partner versucht zu schlafen), Untertitel sehr nützlich sein.
• Menschen, die die Sprache des Videos nicht sprechen, möchten möglicherweise eine Textabschrift oder sogar eine Übersetzung, um ihnen zu helfen, die Medieninhalte zu verstehen.

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

WebVTT ist ein Format zum Schreiben von Textdateien, die mehrere Textteile zusammen mit Metadaten enthalten, wie die Zeit im Video, zu der jeder Text angezeigt werden soll, und sogar eingeschränkte Stil- und Positionierungsinformationen. Diese Textstrings 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 (auch bekannt als Captions)

Synchronisierte Transkriptionen des Dialogs oder Beschreibungen signifikanter Geräusche, um Personen, die das Audio nicht hören können, zu helfen zu verstehen, was vor sich geht.

Zeitbeschreibungen

Text, der vom Medienplayer gesprochen werden sollte, um wichtige visuelle Elemente für blinde oder anderweitig sehbehinderte Benutzer 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-Medienwiedergabe anzuzeigen, müssen Sie:

1. Speichern Sie die Datei als .vtt-Datei irgendwo, von wo der Server sie bedienen kann (siehe unten), zum Beispiel im gleichen Verzeichnis wie die HTML-Datei.
2. Verknüpfen Sie die .vtt-Datei mit dem <track>-Element. <track> sollte innerhalb von <audio> oder <video> platziert werden, jedoch nach allen <source>-Elementen. Verwenden Sie das kind-Attribut, um anzugeben, ob die Cues subtitles, captions oder descriptions sind. Außerdem verwenden Sie srclang, um dem Browser mitzuteilen, in welcher Sprache Sie die Untertitel geschrieben haben. Schließlich fügen Sie 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 Browserausgang sehen Sie ein Video mit angezeigten Untertiteln, ähnlich wie dieses:

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

Für dieses Active-Learning möchten wir (idealerweise), dass Sie hinausgehen in die Welt und einige Ihrer eigenen Videos und Audios aufnehmen — die meisten Handys gestatten heute, Audio und Video sehr einfach aufzunehmen und, vorausgesetzt, Sie können es auf Ihren Computer übertragen, können Sie es verwenden. Sie müssen möglicherweise einige Konvertierungen durchführen, um zu einem WebM und MP4 im Fall von Video und einem MP3 und Ogg im Fall von Audio zu gelangen, aber es gibt genügend Programme, die Ihnen dies ohne große Mühe erlauben, wie Miro Video Converter und Audacity. Wir möchten, dass Sie es versuchen!

Wenn Sie keine Video- oder Audioquellen haben, können Sie gerne unsere Beispiel-Audio- und Videodateien verwenden, um diese Übung durchzuführen. Sie können auch unseren Beispielcode zur 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 gleichen Verzeichnis, die index.html genannt wird.
3. Fügen Sie <audio>- und <video>-Elemente zur Seite hinzu; lassen Sie sie die Standard-Bedienelemente des Browsers anzeigen.
4. Geben Sie beiden <source>-Elemente, sodass Browser das am besten unterstützte Audioformat finden und laden. Diese sollten Attribute vom Typ type enthalten.
5. Geben Sie dem <video>-Element ein Poster, das angezeigt wird, bevor das Video gestartet wird. Haben Sie Spaß beim Erstellen Ihres eigenen Posterbildes.

Als zusätzlichen Bonus könnten Sie versuchen, Texttracks zu recherchieren und auszuprobieren, wie man Untertitel zu Ihrem Video hinzufügt.

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich an die wichtigsten Informationen erinnern? Sie können einige weitere Tests finden, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe Testen Sie Ihre Fähigkeiten: Multimedia und Einbettung. Beachten Sie, dass die dritte Bewertungsfrage in diesem Test Kenntnisse einiger der im nächsten Artikel behandelten Techniken annimmt, daher möchten Sie diesen vielleicht lesen, bevor Sie versuchen, sie zu beantworten.

Und das war's — wir hoffen, Sie hatten Spaß beim Spielen mit Video und Audio auf Webseiten! Im nächsten Artikel werden wir uns andere Möglichkeiten zur Einbettung von Inhalten im Web ansehen, unter Verwendung von Technologien wie <iframe> und <object>.

• Die HTML-Medienelemente: <audio>, <video>, <source>, und <track>
• Hinzufügen von Untertiteln und Untertiteln zu Videos
• Audio- und Videoübermittlung: VIELE Details über das Einfügen von Audio und Video auf Webseiten mit HTML und JavaScript.
• Audio- und Videomanipulation: VIELE Details über die Manipulation von Audio und Video mit JavaScript (zum Beispiel das Hinzufügen von Filtern).
• Web-Medientechnologien
• Leitfaden für Medientypen und -formate im Web
• Ereignisreferenz > Medien

• Zurück
• Übersicht: Multimedia und Einbettung
• Weiter