Audio und Video

Wie Sie im Modul images gelernt haben, ermöglicht HTML das Einbetten von Medien in eine Webseite. In diesem Abschnitt Wir beschäftigen uns mit Audio- und Videodateien, inklusive Einbettung, Nutzersteuerung, Bereitstellung eines statischen Bildplatzhalters für deine Videos und Best Practices, einschließlich der Bereitstellung von Audio- und Videodateien.

<audio> und <video>

<video> und <audio> -Elemente können verwendet werden, um Mediaplayer direkt mit dem Attribut src einzubetten, oder als Containerelement für eine Reihe von <source>-Elementen verwendet werden. jeder einen src-Dateivorschlag bereitstellt. Während <video> zum Einbetten einer Audiodatei verwendet werden kann, ist das <audio>-Element für die Einbettung besser geeignet. Audiodateien.

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

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

In diesem <video>-Beispiel ist eine einzelne Quelle mit dem Attribut src enthalten, das mit der Videoquelle verknüpft ist. Das Attribut poster ein Bild bereitstellt, das beim Laden des Videos angezeigt wird. Schließlich bietet das Attribut controls die Videosteuerelemente für Nutzer.

Zwischen dem öffnenden und dem schließenden Tag befindet sich Fallback-Content. Wenn der User-Agent <video> (oder <audio>) nicht unterstützt, wird dieser Inhalt angezeigt. Das schließende </video>-Tag ist auch dann erforderlich, wenn sich zwischen den beiden Tags kein Inhalt befindet. (aber es sollte immer Fallback-Inhalte geben , richtig?).

Wenn das öffnende <video>- oder <audio>-Tag kein src-Attribut enthält, füge mindestens ein <source>-Element hinzu. jeweils mit einem src-Attribut zu einer Mediendatei. Das folgende Beispiel enthält drei Optionen für Mediendateien: Fallback-Inhalte, sowie englische und französische Untertitel zwischen dem öffnenden und dem schließenden Tag.

<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. Das type-Attribut informiert den Browser. des Medientyps der verknüpften Datei. Dadurch wird verhindert, dass der Browser der Mediendateien nicht decodiert werden kann.

Innerhalb des type-Attributs können Sie einen codecs-Parameter einfügen. der genau angibt, wie die Ressource codiert wird. Mit Codecs können Sie Medienoptimierungen einbinden, die noch nicht unterstützt werden in allen Browsern angezeigt. Der Codec wird vom Medientyp durch ein Semikolon getrennt. Der Codec kann beispielsweise mit intuitive Syntax wie <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">, mit dem angegeben wird, WebM-Dateien enthalten VP8-Video- und Vorbis-Audioinhalte. Codecs können auch schwieriger zu entschlüsseln sein, wie z. B. <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a">. was angibt, dass die MP4-Codierung die Ebene 4.2 des Hauptprofils von Advanced Video Coding hat. Diese Syntax zu erklären, geht weit über den Umfang dieser Lektion. Jake Archibald erklärt in seinem Beitrag, wie man den Codec-Parameter für ein AV1-Video ermittelt. wenn Sie mehr erfahren möchten.

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

Achten Sie darauf, das Seitenverhältnis Ihres Videos festzulegen, da es beim Laden des Videos zu einem Größenunterschied kommt. zwischen dem Poster und dem Video wird neu angeordnet.

Gib immer das boolesche controls-Attribut an. Dadurch können die Nutzer sichtbar sein, sodass Nutzer die Lautstärke regeln, den Ton vollständig stummschalten und das Video im Vollbildmodus anzeigen können. Das Weglassen von controls beeinträchtigt die Nutzererfahrung, insbesondere wenn das boolesche Attribut autoplay enthalten ist. Beachten Sie, dass einige Browser berücksichtigen die autoplay-Attributanweisung nicht, wenn das boolesche Attribut muted weggelassen wird, weil die automatische Wiedergabe eines Mediendatei ist im Allgemeinen eine schlechte User Experience, auch wenn sie stummgeschaltet und mit sichtbaren Steuerelementen versehen sind.

Titelanzahl

Füge zwischen den öffnenden und erforderlichen schließenden Tags für Audio und Video mindestens ein <track>-Element ein. zur Angabe von zeitgesteuerten Texttracks. Das folgende Beispiel enthält zwei <track>-Dateien mit zeitgesteuerten Textuntertiteln auf Englisch und 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 müssen sich in derselben Domain wie das HTML-Dokument befinden, es sei denn, das Element crossorigin enthalten.

Für das kind-Attribut des Titels gibt es fünf Aufzählungswerte: subtitles, captions, descriptions, chapters und weitere metadata.

Gib subtitles zusammen mit dem Attribut srclang für die Transkription von Dialogen und Übersetzungen an. Der Wert der einzelnen label-Attribute wird dem Nutzer als Option angezeigt. Der Content der ausgewählten VTT-Option wird über dem Video angezeigt. Das Erscheinungsbild der Untertitel können durch Targeting auf ::cue/ ::cue() gestaltet werden.

Der Wert kind="caption" sollte für Transkriptionen und Übersetzungen reserviert werden, die Soundeffekte und andere relevante Audioinformationen enthalten. Das gilt nicht nur für gehörlose Zuschauer. Vielleicht finden Nutzende ihren Kopfhörer nicht und haben die Untertitel aktiviert. Oder vielleicht haben sie Die letzten paar Gesprächspunkte aus einem Lieblingspodcast kennen sich also gut aus. Deshalb möchten sie das Transkript lesen, um ihr Verständnis zu bestätigen. Alternative Möglichkeiten für den Zugriff auf Audio- und Videoinhalte zu haben, ist sowohl wichtig als auch praktisch.

Das 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 verwenden ein System ohne Bildschirm wie Google Home oder Alexa oder sind blind.

Untertitel zur Verfügung stellen Das WebVTT-Format macht das Video für Personen mit eingeschränktem Hörvermögen. Denken Sie daran: Beeinträchtigungen sind eine Diskrepanz zwischen einer Person und ihrer aktuellen Umgebung. Mögliche Ursachen für Beeinträchtigungen des Hörvermögens wenn der Nutzer sich in einer lauten Umgebung aufhält, defekte Lautsprecher hat, defekte Kopfhörer hat, Schwerhörigkeit oder ist taub. Wenn deine Inhalte zugänglich sind, hilft es weitaus mehr Menschen, als du denkst. dass es allen hilft.

Überlegungen zu Hintergrundvideos

Ihr Marketing- oder Designteam möchte, dass Ihre Website ein Hintergrundvideo enthält. Im Allgemeinen bedeutet dies, dass eine stummgeschaltete, automatische Wiedergabe oder eine Videoschleife ohne Steuerung. Der HTML-Code könnte wie folgt 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 über Hintergrundvideos übertragen werden, ohne den Nutzern vollständige Wiedergabe und Zugriff auf alle Untertitel steuern können. Da dieses Video reine Dekoration ist, enthält es die Rolle „ARIA“ von none und lasst Fallback-Inhalte aus. Die Leistung von Videos, die immer stummgeschaltet sind, kannst du verbessern, indem du den Audiotrack aus deinen Medienquellen entfernst.

Wenn das Video höchstens fünf Sekunden lang abgespielt wird, ist bei den Richtlinien für Bedienungshilfen kein Pausenmechanismus erforderlich. mit dem booleschen loop-Attribut wird standardmäßig eine Endlosschleife ausgelöst, wobei das Zeitlimit von fünf Sekunden oder eines anderen überschritten wird. Immer sollte das Video immer pausiert werden. Das geht am einfachsten, wenn du controls einfügst.

Benutzerdefinierte Mediensteuerung

Wenn Sie statt der integrierten Steuerelemente des Browsers benutzerdefinierte Video- oder Audiosteuerelemente anzeigen lassen möchten, fügen Sie das Attribut controls ein. Verwenden Sie dann JavaScript verwenden, um benutzerdefinierte Mediensteuerelemente hinzuzufügen und das Attribut für Steuerelemente zu entfernen. Sie können beispielsweise einen <button> hinzufügen, der Wiedergabestatus einer Audiodatei.

<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 umschaltet zwischen Wiedergabe- und Pause-Status. Das Attribut aria-controls ist im id des Elements enthalten, das über die Schaltfläche gesteuert wird. in diesem Fall die Audiodaten. Jede Schaltfläche zur Steuerung des Audios verfügt über einen Event-Handler.

Wenn Sie benutzerdefinierte Steuerelemente erstellen möchten, verwenden Sie HTMLMediaElement.play() und HTMLMediaElement.pause() Wenn Sie den Wiedergabestatus umschalten, um den Text der Schaltfläche umzuschalten:

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 Einfügen des Attributs controls hat der Nutzer die Möglichkeit, die Audio- oder Videoinhalte zu steuern, selbst wenn JavaScript fehlschlägt. Entfernen Sie das Attribut „controls“ erst, wenn eine Ersatzschaltfläche instanziiert wurde.

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

Externe Steuerelemente immer einbinden, wenn Nutzer nicht auf die Steuerelemente zugreifen können, z. B. bei Hintergrundvideos, bei denen die Steuerelemente ausgeblendet sind hinter dem Websitecontent stehen. Es ist wichtig, die Grundlagen der Anforderungen an die Barrierefreiheit im Internet zu verstehen, um unterschiedliche Umwelt- und Sinnesbedürfnisse erfüllen, einschließlich der Millionen von Menschen mit Hör- und Sehbeeinträchtigungen. Wir haben gerade das HTMLMediaElement angesprochen. Es bietet mehrere Eigenschaften, Methoden und Ereignisse, die sowohl vom HTMLVideoElement und HTMLAudioElement enthält, wobei HTMLMediaElement einige Eigenschaften hinzufügt, eigenen Methoden und Ereignissen. Es gibt noch einige andere Media APIs. einschließlich einer TextTrack API. Du kannst Medienaufnahmen und Streams verwenden und MediaDevices APIs zur Aufzeichnung von Audio über das Mikrofon eines Nutzers oder einen Nutzerbildschirm aufzeichnen. Web Audio API ermöglicht die Bearbeitung von Live- und aufgezeichneten Audioinhalten sowie das Streamen, Speichern oder Senden von Audioinhalten an das <audio>-Element.

Wissen testen

Testen Sie Ihr Wissen über Audio und Video.