Wie Sie im Modul Bilder gelernt haben, ermöglicht HTML das Einbetten von Medien in eine Webseite. In diesem Abschnitt geht es um Audio- und Videodateien, einschließlich deren Einbettung, Steuerelemente für Nutzer, die Bereitstellung eines statischen Bildplatzhalters für Ihre Videos und Best Practices, einschließlich der Zugänglichkeit von Audio- und Videodateien.
<audio> und <video>
Die Elemente <video> und <audio> können verwendet werden, um Mediaplayer direkt mit dem Attribut src einzubetten, oder als Containerelement für eine Reihe von <source>-Elementen, die jeweils einen Vorschlag für die src-Datei liefern. Während <video> zum Einbetten einer Audiodatei verwendet werden kann, ist das Element <audio> für das Einbetten von Audiodateien besser geeignet.
Die öffnenden <video>- und <audio>-Tags können mehrere andere Attribute enthalten, einschließlich controls, autoplay, loop, mute, preload und die globalen Attribute. Das Element <video> 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 mit einem src-Attribut, das mit der Videoquelle verknüpft ist. Das Attribut poster gibt ein Bild an, das beim Laden des Videos angezeigt wird. Und schließlich stellt das Attribut controls die Videosteuerelemente für Nutzer bereit.
Der Fallback-Content wird zwischen dem öffnenden und dem schließenden Tag eingefügt. Wenn der User-Agent <video> (oder <audio>) nicht unterstützt, wird dieser Inhalt angezeigt. Das schließende </video>-Tag ist erforderlich, auch wenn sich zwischen den beiden kein Inhalt befindet. Es sollte aber immer Fallback-Inhalte geben , oder?
Wenn das öffnende <video>- oder <audio>-Tag kein src-Attribut enthält, füge eines oder mehrere <source>-Elemente hinzu, jeweils mit einem src-Attribut für eine Mediendatei. Das folgende Beispiel enthält drei Optionen für Mediendateien, 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 untergeordnete <source>-Attribut enthält ein src-Attribut, das auf die Ressource verweist, und das type-Attribut informiert den Browser über den Medientyp der verknüpften Datei. Dadurch wird verhindert, dass der Browser Mediendateien abruft, die er nicht decodieren könnte.
Innerhalb des type-Attributs können Sie einen codecs-Parameter angeben, der genau angibt, wie die Ressource codiert wird. Mit Codecs können Sie Medienoptimierungen einbinden, die noch nicht in allen Browsern unterstützt werden. Der Codec wird durch ein Semikolon vom Medientyp getrennt. Der Codec kann beispielsweise mit einer intuitiven Syntax wie <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis"> geschrieben werden, die angibt, 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 der Advanced Video Coding-Hauptprofilebene 4.2 entspricht. Diese Syntax zu erklären,
wird in dieser Lektion bei Weitem nicht erläutert. Jake Archibald hat einen Beitrag veröffentlicht, in dem erklärt wird, wie Sie den Codec-Parameter für ein AV1-Video bestimmen.
Sobald ein Video verfügbar ist, wird der erste Frame als Standbild angezeigt.
Das lässt sich kontrollieren. Mit dem Attribut poster wird die Quelle eines Bildes aktiviert, während das Video heruntergeladen wird und bis es abgespielt wird. Wenn das Video wiedergegeben und anschließend pausiert wird, wird das Poster nicht noch einmal eingeblendet.
Definieren Sie das Seitenverhältnis Ihres Videos, da beim Laden des Videos ein Größenunterschied zwischen dem Poster und dem Video zu einem Reflow oder einer Aktualisierung führt.
Geben Sie immer das boolean controls-Attribut an. Dadurch sind die Steuerelemente sichtbar und Nutzer können die Lautstärke regeln, den Ton vollständig stummschalten und das Video in den Vollbildmodus erweitern.
Wenn controls weggelassen wird, beeinträchtigt das die Nutzerfreundlichkeit, insbesondere wenn das boolesche Attribut autoplay verwendet wird. Einige Browser berücksichtigen die Attributanweisung autoplay nicht, wenn das boolesche Attribut muted weggelassen wird. Dies liegt daran, dass die automatische Wiedergabe einer Mediendatei im Allgemeinen für Nutzer beeinträchtigt wird, selbst wenn sie stummgeschaltet und die Steuerelemente sichtbar sind.
Titelanzahl
Fügen Sie zwischen den öffnenden und erforderlichen schließenden Tags von Audio und Video ein oder mehrere <track>-Elemente ein, um zeitgesteuerte Texttracks anzugeben. Das folgende Beispiel enthält zwei <track>-Dateien mit zeitgesteuerten Untertiteln sowohl auf Englisch als auch auf Französisch.
<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 Trackdateien müssen 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 Aufzählungswerte für das Titel-kind-Attribut: subtitles, captions, descriptions, chapters und weitere metadata-Werte.
Gib subtitles zusammen mit dem Attribut srclang für Dialogtranskripte und Übersetzungen an. 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 Targeting von ::cue/ ::cue() angepasst werden.
Der Wert kind="caption" sollte für Transkriptionen und Übersetzungen reserviert werden, die Soundeffekte und andere relevante Audiodaten enthalten.
Das gilt nicht nur für gehörlose Zuschauer. Vielleicht kann ein Nutzer seine Kopfhörer nicht finden und hat deshalb die Untertitel aktiviert. Oder vielleicht haben sie die letzten Gesprächspunkte eines Lieblingspodcasts nicht ganz verstanden und möchten das Transkript lesen, um zu bestätigen, dass sie sie verstanden haben.
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, unabhängig davon, ob sie ein System ohne Bildschirm wie Google Home oder Alexa verwenden oder blind sind.
Durch die Bereitstellung von Untertiteln im WebVTT-Format wird das Video für Menschen mit eingeschränktem Hörvermögen zugänglich. Denken Sie daran, dass eine Behinderung eine Diskrepanz zwischen einer Person und ihrer aktuellen Umgebung ist. Hörbeeinträchtigte können darauf zurückzuführen sein, dass sich der Nutzer in einer lauten Umgebung befindet, defekte Lautsprecher oder defekte Kopfhörer haben oder wenn der Nutzer einen Hörverlust hat oder taub ist. Wenn du dafür sorgst, dass deine Inhalte barrierefrei sind, hilft das vielen mehr, als du denkst – es hilft allen.
Überlegungen zu Hintergrundvideos
Ihr Marketing- oder Designteam möchte vielleicht ein Hintergrundvideo auf Ihrer Website einfügen. Im Allgemeinen bedeutet dies, dass sie eine stummgeschaltete, automatisch wiedergegebene Videoschleife ohne Steuerelemente wünschen. Der HTML-Code könnte in etwa so aussehen:
<video 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>
Auf Hintergrundvideos kann nicht zugegriffen werden. Inhalte dürfen nicht durch Hintergrundvideos übertragen werden, ohne Nutzern die volle Kontrolle über die Wiedergabe und den Zugriff auf alle Untertitel zu geben. Da dieses Video rein dekorativ ist, enthält es die ARIA-Rolle none und lässt Fallback-Inhalte weg.
Wenn du die Leistung von immer stummgeschalteten Videos verbessern möchtest, entferne den Audiotrack aus deinen Medienquellen.
Wenn dein Video höchstens fünf Sekunden lang wiedergegeben wird, ist gemäß den Richtlinien für Bedienungshilfen kein Pausenmechanismus erforderlich. Alle Inhalte mit dem booleschen Attribut loop werden jedoch standardmäßig in einer Endlosschleife wiedergegeben, wobei diese oder ein anderes Zeitlimit von 5 Sekunden überschritten wird. Für eine gute Nutzererfahrung empfiehlt es sich, das Video immer zu pausieren. Dies lässt sich am einfachsten erledigen, indem Sie controls einfügen.
Benutzerdefinierte Mediensteuerelemente
Fügen Sie anstelle der integrierten Browsersteuerelemente das Attribut controls ein, um benutzerdefinierte Video- oder Audiosteuerelemente anzuzeigen. Verwenden Sie dann JavaScript, um benutzerdefinierte Mediensteuerelemente hinzuzufügen und das Attribut „Steuerelemente“ zu entfernen. Sie können beispielsweise einen <button> hinzufügen, der den Wiedergabestatus einer Audiodatei ein-/ausschaltet.
<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 enthält, der aktualisiert wird, wenn der Besucher zwischen Wiedergabe- und Pausenstatus wechselt. Das Attribut aria-controls ist in den id des Elements enthalten, das von der Schaltfläche gesteuert wird, in diesem Fall das Audio. Jede Schaltfläche zur Steuerung der Audioinhalte verfügt über einen Event-Handler.
Verwenden Sie HTMLMediaElement.play() und HTMLMediaElement.pause(), um benutzerdefinierte Steuerelemente zu erstellen. Wenn Sie den Wiedergabestatus umschalten, können Sie auch den Text der Schaltfläche umschalten:
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 kann der Nutzer die Audio- bzw. Videowiedergabe steuern, selbst wenn JavaScript fehlschlägt.
Entfernen Sie das Attribut „Steuerelemente“ erst, wenn eine Ersatzschaltfläche instanziiert wurde.
document.querySelector('[aria-controls]').removeAttribute('controls');
Schließen Sie immer externe Steuerelemente ein, wenn Nutzer keinen Zugriff darauf haben, z. B. bei Hintergrundvideos, deren Steuerelemente hinter Websiteinhalten ausgeblendet sind. Es ist wichtig, die Grundlagen der Anforderungen an die Barrierefreiheit von Medien zu kennen, um Nutzer mit unterschiedlichen Umwelt- und Sinnesbedürfnissen zu unterstützen, einschließlich Millionen von Menschen mit Hör- und Sehbeeinträchtigungen.
Wir haben gerade das HTMLMediaElement angesprochen, das mehrere Eigenschaften, Methoden und Ereignisse enthält, die sowohl vom HTMLVideoElement als auch vom HTMLAudioElement übernommen werden. HTMLMediaElement fügt einige eigene Eigenschaften, Methoden und Ereignisse hinzu. Es gibt mehrere andere Media APIs, darunter eine TextTrack API. Sie können die APIs Media Capture und Streams sowie die MediaDevices API verwenden, um Audio über das Mikrofon eines Nutzers aufzuzeichnen oder den Bildschirm eines Nutzers aufzuzeichnen. Die Web Audio API ermöglicht die Bearbeitung von Live- und vorab aufgezeichneten Audioinhalten und das Streamen, Speichern oder Senden der Audiodaten an das <audio>-Element.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über Audio und Video.
Wofür wird das Element <track> verwendet?
Was wird über das Attribut poster gesteuert?