Audio und Video

Wie Sie im Modul Bilder gelernt haben, können Sie mit HTML Medien in eine Webseite einbetten. In diesem Abschnitt geht es um Audio- und Videodateien. Wir erklären, wie Sie sie einbetten, welche Nutzersteuerungen es gibt, wie Sie einen statischen Bild-Platzhalter für Ihre Videos bereitstellen und welche Best Practices es gibt, z. B. wie Sie Audio- und Videodateien zugänglich machen.

<audio> und <video>

Mit den Elementen <video> und <audio> können Sie Media-Player direkt mit dem Attribut src einbetten oder als Containerelement für eine Reihe von <source>-Elementen verwenden, die jeweils einen src-Dateivorschlag enthalten. Mit <video> kann eine Audiodatei eingebettet werden. Das <audio>-Element ist jedoch für das Einbetten von Audiodateien vorzuziehen.

Die öffnenden Tags <video> und <audio> können mehrere andere Attribute enthalten, darunter controls, autoplay, loop, mute, preload und die globalen Attribute. Das <video>-Element unterstützt auch die Attribute height, width und poster.

<video src="videos/machines.webm" poster="images/machine.jpg" controls>
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

Dieses <video>-Beispiel hat eine einzelne Quelle, wobei das src-Attribut auf die Videoquelle verweist. Das Attribut poster enthält ein Bild, das während des Ladens des Videos angezeigt wird. Das Attribut controls bietet schließlich Steuerelemente für das Video.

Fallback-Content wird zwischen dem öffnenden und dem schließenden Tag eingefügt. Wenn der User-Agent <video> nicht unterstützt, wird <audio> angezeigt. Das schließende </video>-Tag ist erforderlich, auch wenn zwischen den beiden Tags kein Inhalt vorhanden ist. Es sollte aber immer Fallback-Inhalte geben.

Wenn in den öffnenden <video>- oder <audio>-Tags kein src-Attribut enthalten ist, fügen Sie ein oder mehrere <source>-Elemente mit jeweils einem src-Attribut für eine Mediendatei ein. Das folgende Beispiel enthält drei Optionen für Media-Dateien, Fallback-Inhalte sowie englische und französische Untertitel zwischen den öffnenden und schließenden Tags.

<video controls poster="images/machine.jpg">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
  <track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
  <track label="Francais" kind="subtitles" srclang="fr" src="vtt/subtitles-fr.vtt" />
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

Jedes <source>-Unterelement enthält ein src-Attribut, das auf die Ressource verweist, und das type-Attribut informiert den Browser über den Medientyp der verknüpften Datei. So wird verhindert, dass der Browser Mediendateien abruft, die er nicht decodieren kann.

Im Attribut type können Sie den Parameter codecs einfügen, der genau angibt, wie die Ressource codiert wird. Mit Codecs können Sie Media-Optimierungen als progressive Verbesserungen (Elemente, die nicht von allen Browsern unterstützt werden) einfügen. Der Codec wird durch ein Semikolon vom Medientyp getrennt. Der Codec kann beispielsweise mit einer intuitiven Syntax geschrieben werden, z. B. <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">, was darauf hinweist, dass die WebM-Dateien VP8-Video und Vorbis-Audio enthalten.

Codecs können auch schwieriger zu entschlüsseln sein, z. B. <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a">, was darauf hinweist, dass die MP4-Codierung Advanced Video Coding Main Profile Level 4.2 ist. Die Erklärung dieser Syntax würde den Rahmen dieser Lektion sprengen. Weitere Informationen finden Sie im Beitrag von Jake Archibald.

Wenn ein Video angezeigt wird, wird standardmäßig der erste Frame des Videos als Standbild angezeigt, sobald er verfügbar ist. Das lässt sich steuern. Mit dem Attribut poster kann die Quelle eines Bildes angezeigt werden, während das Video heruntergeladen wird und bis es wiedergegeben wird. Wenn das Video abgespielt und anschließend pausiert wird, wird das Poster nicht noch einmal angezeigt.

Definieren Sie das Seitenverhältnis Ihres Videos. Wenn das Video geladen wird, führt eine Größenabweichung zwischen dem Poster und dem Video zu einem Reflow und Repaint.

Fügen Sie immer das boolesche Attribut controls ein. Dadurch werden die Nutzersteuerelemente sichtbar, mit denen Nutzer die Audiopegel anpassen, die Audioausgabe vollständig stummschalten und das Video im Vollbildmodus wiedergeben können. Wenn Sie controls weglassen, kann das zu einer schlechten Nutzererfahrung führen, insbesondere wenn das boolesche Attribut autoplay enthalten ist. Hinweis: Einige Browser ignorieren die Attributanweisung autoplay, wenn das boolesche Attribut muted weggelassen wird, da die automatische Wiedergabe einer Mediendatei im Allgemeinen eine schlechte Nutzererfahrung ist, selbst wenn sie stummgeschaltet ist und Steuerelemente sichtbar sind.

Titelanzahl

Fügen Sie zwischen dem öffnenden und dem erforderlichen schließenden Tag von Audio und Video ein oder mehrere <track>-Elemente ein, um Timed-Text-Tracks anzugeben. Das folgende Beispiel enthält zwei <track>-Dateien, die Untertitel mit Zeitangaben auf Englisch und Französisch enthalten.

<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Français" kind="subtitles" srclang="fr" lang="fr-fr" src="vtt/subtitles-fr.vtt" />

Die im Attribut src angegebenen Track-Dateien sollten im WebVTT-Format (.vtt) vorliegen. Die Dateien sollten sich in derselben Domain wie das HTML-Dokument befinden, es sei denn, das Attribut crossorigin ist enthalten.

Es gibt fünf aufgezählte Werte für das Attribut kind des Tracks: subtitles, captions, descriptions, chapters und metadata.

Fügen Sie subtitles zusammen mit dem Attribut srclang für die Transkription und Übersetzung von Dialogen hinzu. Der Wert jedes label-Attributs wird dem Nutzer als Option angezeigt. Der Inhalt der ausgewählten VTT-Option wird über dem Video angezeigt. Die Darstellung der Untertitel kann durch Festlegen des ::cue/ ::cue()-Pseudoelements gestaltet werden.

Der Wert kind="caption" sollte für Transkriptionen und Übersetzungen reserviert sein, die Soundeffekte und andere relevante Audioinformationen enthalten. Das ist nicht nur für gehörlose Zuschauer gedacht. Vielleicht kann ein Nutzer seine Kopfhörer nicht finden und hat deshalb die Untertitel aktiviert. Vielleicht haben sie auch die letzten paar Punkte eines Lieblingspodcasts nicht ganz verstanden und möchten das Transkript lesen, um ihr Verständnis zu überprüfen. Alternative Möglichkeiten für den Zugriff auf Audio- und Videoinhalte sind sowohl wichtig als auch praktisch.

Die kind="description" ist für Textbeschreibungen der visuellen Inhalte im Video für Nutzer gedacht, die das Video nicht sehen können, z. B. weil sie ein System ohne Bildschirm wie Google Home oder Alexa verwenden oder blind sind.

Wenn Sie Untertitel im WebVTT-Format bereitstellen, können Menschen mit Hörbehinderung das Video besser verstehen. Eine eingeschränkte Hörfähigkeit kann darauf zurückzuführen sein, dass sich der Nutzer in einer lauten Umgebung befindet, defekte Lautsprecher oder Kopfhörer verwendet oder einen Hörverlust hat oder gehörlos ist. Wenn Sie dafür sorgen, dass Ihre Inhalte zugänglich sind, helfen Sie viel mehr Menschen als Sie vielleicht denken – und zwar allen.

Überlegungen zum Hintergrundvideo

Ihr Marketing- oder Designteam möchte möglicherweise, dass Ihre Website ein Hintergrundvideo enthält. In der Regel bedeutet das, dass sie ein stummgeschaltetes, automatisch wiedergegebenes Video mit Schleifenwiedergabe ohne Steuerelemente wünschen. Der HTML-Code könnte so aussehen:

<video playsinline autoplay loop muted poster="images/machine.jpg" role="none">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
</video>

Hintergrundvideos sind nicht zugänglich. Inhalte dürfen nicht über Hintergrundvideos vermittelt werden, ohne dass Nutzer die volle Kontrolle über die Wiedergabe und den Zugriff auf alle Untertitel haben. Da dieses Video rein dekorativ ist, enthält es die ARIA-Rolle none und es wird kein Fallback-Inhalt angegeben. Wenn Sie die Leistung von Videos, die immer stummgeschaltet sind, verbessern möchten, entfernen Sie den Audiotrack aus Ihren Media-Quellen.

Wenn dein Video fünf Sekunden oder weniger lang ist, ist gemäß den Richtlinien zur Barrierefreiheit kein Pausenmechanismus erforderlich. Alles mit dem booleschen Attribut loop wird jedoch standardmäßig in einer Endlosschleife wiedergegeben und überschreitet damit dieses oder ein anderes Zeitlimit. Für eine gute Nutzererfahrung sollte immer eine Möglichkeit zum Pausieren des Videos vorhanden sein. Am einfachsten ist das, wenn Sie controls einfügen.

Benutzerdefinierte Mediensteuerung

Wenn Sie benutzerdefinierte Video- oder Audiosteuerelemente anstelle der im Browser integrierten Steuerelemente anzeigen möchten, fügen Sie das Attribut controls ein. Fügen Sie dann mit JavaScript benutzerdefinierte Media-Steuerelemente hinzu und entfernen Sie das Attribut „controls“. Sie können beispielsweise eine <button> hinzufügen, mit der der Wiedergabestatus einer Audiodatei umgeschaltet wird.

<button id="playPause" aria-controls="idOfAudio"
  data-pause-text="Pause audio"
  data-play-text="Play audio">Pause audio</button>

Dieses Beispiel enthält eine Schaltfläche mit dataset-Attributen, die den Text enthalten, der aktualisiert wird, wenn der Besucher zwischen den Wiedergabe- und Pausestatus wechselt. Das Attribut aria-controls ist im id des Elements enthalten, das von der Schaltfläche gesteuert wird, in diesem Fall das Audio. Jede Schaltfläche, mit der die Audiowiedergabe gesteuert wird, hat einen Event-Handler.

Verwenden Sie HTMLMediaElement.play() und HTMLMediaElement.pause(), um benutzerdefinierte Steuerelemente zu erstellen. Wenn Sie den Wiedergabestatus umschalten, schalten Sie auch den Text der Schaltfläche um:

const pauseButton = document.getElementById('playPause');

pauseButton.addEventListener("click", pauseAndPlay, false);

function pauseAndPlay() {
  console.log(this);
  const media = document.getElementById(this.getAttribute('aria-controls'));

  if (media.paused) {
    media.play();
    this.innerText = this.dataset.pauseText;
  } else {
    media.pause();
    this.innerText = this.dataset.playText;
  }
}

Durch das Attribut controls hat der Nutzer die Möglichkeit, die Audio- oder Videowiedergabe zu steuern, auch wenn JavaScript fehlschlägt. Entfernen Sie das Attribut „controls“ erst, wenn eine Ersatzschaltfläche instanziiert wurde.

document.querySelector('[aria-controls]').removeAttribute('controls');

Fügen Sie immer externe Steuerelemente hinzu, wenn Nutzer nicht auf die Steuerelemente zugreifen können, z. B. bei Hintergrundvideos, deren Steuerelemente hinter Websiteinhalten verborgen sind. Es ist wichtig, die Grundlagen der Anforderungen an die Barrierefreiheit von Medien zu verstehen, um Nutzern mit unterschiedlichen Umgebungs- und sensorischen Bedürfnissen gerecht zu werden. Dazu gehören auch die Millionen von Menschen mit Hör- und Sehbeeinträchtigungen. Wir haben uns gerade mit HTMLMediaElement befasst, das mehrere Attribute, Methoden und Ereignisse bereitstellt, die sowohl von HTMLVideoElement als auch von HTMLAudioElement übernommen werden. HTMLMediaElement fügt einige eigene Attribute, Methoden und Ereignisse hinzu. Es gibt mehrere andere Media APIs, darunter eine TextTrack API. Mit den APIs Media Capture and Streams und MediaDevices können Sie Audiodaten vom Mikrofon eines Nutzers aufzeichnen oder den Bildschirm eines Nutzers aufzeichnen. Mit der Web Audio API können Sie Live- und aufgezeichnete Audiodaten bearbeiten und die Audiodaten streamen, speichern oder an das <audio>-Element senden.

Wissen testen

Testen Sie Ihr Wissen über Audio und Video.