Audio und Video in HTML5 - HTML lernen

Früher erlaubten native Webtechnologien wie HTML nicht, Video und Audio ins Web einzubetten. Plugin-basierte Technologien wurden populär, um solche Inhalte zu verarbeiten, hatten aber viele Probleme, darunter die schlechte Unterstützung von HTML-/CSS-Funktionen sowie Sicherheits- und Zugänglichkeitsprobleme. Später führte die HTML5-Spezifikation solche Funktionen mit den Elementen <video> und <audio> ein.

Das Element <audio> wird verwendet, um Audiodateien in eine Webseite einzubetten, und das Element <video> wird verwendet, um ein Video einzubetten.

So fügen Sie Audio auf der Webseite hinzu

Vor HTML5 wurden Audiodateien zur Seite hinzugefügt, indem Hintergrundsound mithilfe des nicht standardisierten <bgsound>-Tags eingebunden wurde. Die Datei wurde abgespielt, während die Seite angezeigt wurde, und der Benutzer konnte den Ton nicht stummschalten. In HTML5 können wir Audiodateien mit dem <audio>-Tag einbetten, und es ist nicht nötig, Drittanbieter-Plugins einzubinden. Das Audio-Element kann mit HTML oder Javascript gesteuert und mit CSS gestaltet werden.

Im Code verweist das Attribut src auf die URL der Audiodatei, und das Attribut controls fügt ein Bedienfeld hinzu (Startknopf, Fortschrittsbalken, Lautstärkeregler).

Audio und Video in HTML5

<audio src="name.ogg" controls></audio>

Warnung

Fügen Sie das Attribut controls immer ein, es sei denn, Sie stellen eigene barrierefreie Steuerelemente in JavaScript bereit. Ohne es haben Tastatur- und Screenreader-Benutzer keine Möglichkeit, die Medien abzuspielen, anzuhalten oder die Lautstärke anzupassen.

Audio-Codecs und Audio-Dateiformate

Da nicht alle Browser alle Audioformate unterstützen, wird die Audiodatei mit einem Audio-Codec kodiert/dekodiert (einem digitalen elektronischen Gerät oder einer softwarebasierten Anwendung, die bei der Komprimierung und Dekomprimierung digitaler Audiodaten hilft). Alle Formate von Audiodateien werden gleichzeitig über das Element <source> mit dem Attribut src hinzugefügt.

Beim Definieren verschiedener Dateiformate empfehlen wir, für jede Datei einen MIME-Typ zu definieren, damit der Browser das unterstützte Format erkennen kann. Der MIME-Typ wird mithilfe des Attributs type gesetzt. Der Browser verwendet die erste <source>, die er abspielen kann – ordnen Sie sie daher vom bevorzugtesten oder am weitesten unterstützten Format zum am wenigsten unterstützten an.

Beispiel zum Hinzufügen verschiedener Formate von Audiodateien:

Beispiel für Audio-Codecs und Audio-Dateiformate

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
 </head>
 <body>
   <audio controls>
     <source src="/build/audios/jingle_bells.ogg" type="audio/ogg" />
     <source src="/build/audios/audio.mp3" type="audio/mpeg" />
   </audio>
   <p>Click the play button</p>
 </body>
</html>

Probier es selbst »

Die beliebtesten Audioformate sind die folgenden:

MP3 – das beliebteste Audioformat, das verlustbehaftete Komprimierung verwendet, um die Dateigröße zu reduzieren. Es wird von nahezu jedem Browser unterstützt und ist daher ein sicherer Standard-<source>.

AAC (Advanced Audio Codec) — eine MP3-Alternative, die bei gleichem oder stärkerem Komprimierungsgrad eine höhere Qualität liefert. Es wird ebenfalls von modernen Browsern weitgehend unterstützt (bereitgestellt als audio/mp4 oder audio/aac).

Ogg Vorbis — ein freies Open-Source-Format, das in Firefox und Chrome unterstützt wird, aber nicht in Safari. Es bietet gute Klangqualität, wird aber von Gerätewiedergabeprogrammen seltener verwendet.

Codec- und Browser-Unterstützung, kurz zusammengefasst: MP3 und AAC werden fast überall unterstützt, einschließlich Safari – listen Sie daher eines davon als Fallback-<source> auf. Ogg Vorbis und WebM (Opus) sind lizenzfrei und laufen in Firefox und Chrome, aber nicht in Safari. Eine gängige, sichere Reihenfolge ist das offene Format zuerst und MP3/AAC zuletzt, sodass jeder Browser etwas Abspielbares findet.

So fügen Sie Videodateien hinzu

In früheren Versionen von HTML wurden Videos über Drittanbieter-Plugins wie QuickTime, RealPlayer oder Flash in die Website eingebettet. HTML5 hat ein neues <video>-Tag, das verwendet wird, um ein Video in die Webseite einzufügen.

Im Code sieht das so aus:

Audio und Video in HTML5

<video src="example.webm" controls></video>

Das Attribut src gibt die URL der Datei an, und das Attribut controls zeigt die Wiedergabesteuerung an.

Autoplay, das muted-Attribut und Barrierefreiheit

Mit dem Attribut autoplay können Sie den Browser anweisen, die Wiedergabe zu starten, sobald das Medium bereit ist. Moderne Browser blockieren jedoch Autoplay mit Ton, um den Benutzer nicht zu überraschen. Daher funktioniert autoplay nur zuverlässig, wenn das Medium auch muted ist:

<video autoplay muted controls src="example.webm"></video>

Verwenden Sie Autoplay sparsam. Medien, die von selbst starten, besonders mit Ton, sind für Screenreader-Benutzer und Menschen mit kognitiven oder vestibulären Empfindlichkeiten störend. WCAG verlangt, dass jedes Audio, das länger als drei Sekunden abgespielt wird, eine Möglichkeit zum Anhalten oder Stoppen bietet – lassen Sie daher controls immer vorhanden, wenn Sie autoplay verwenden.

Das poster-Attribut

Bei <video> legt das Attribut poster ein Platzhalterbild fest, das vor der Wiedergabe des Videos (oder während des Ladens) angezeigt wird. Es gibt dem Benutzer eine aussagekräftige Vorschau statt eines leeren Rahmens:

<video controls poster="/build/images/preview.jpg" src="example.webm"></video>

Das preload-Attribut

Das Attribut preload gibt dem Browser einen Hinweis, wie viel er vor dem Drücken der Wiedergabetaste puffern soll:

none — vor dem Start der Wiedergabe nichts puffern.
metadata — nur die Metadaten laden (Dauer, Abmessungen, erstes Bild).
auto — der Browser darf die gesamte Datei vorab herunterladen.

preload ist nur ein Hinweis, und Browser können ihn ignorieren. Auf mobilen Geräten oder datensparsamen Seiten wird metadata oder none empfohlen, um große Dateien nicht herunterzuladen, die der Besucher möglicherweise nie ansieht.

Video-Codecs und Video-Dateiformate

Jeder Browser unterstützt einen bestimmten Satz von Codecs; damit Videos überall abgespielt werden, sollten Sie die Datei in einigen wenigen Formaten bereitstellen. Wie bei Audio wird jedes Format in einem eigenen <source>-Element aufgeführt, beginnend mit dem bevorzugtesten. Jede Videodatei muss einen MIME-Typ haben, der durch das Attribut type festgelegt wird.

Um sicherzustellen, dass der Server Videodateien korrekt an den Browser übergibt, müssen Sie möglicherweise auch deren MIME-Typen in der Serverkonfiguration deklarieren (siehe unten).

Beispiel zum Hinzufügen verschiedener Formate von Videodateien:

Beispiel für Video-Codecs und Video-Dateiformate

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px;
        height: 220px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls>
      <source src="/build/videos/arcnet.io(7-sec).webm" type="video/webm" />
      <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
    </video>
    <p>Some information about video</p>
  </body>
</html>

Probier es selbst »

Heute gibt es 3 grundlegende Videoformate: MP4/MPEG-4, OGG und WebM. Für die Videodatenkomprimierung und ihre Wiedergabe verwenden wir Codecs.

Für eine Videodatei im MPEG-4-Format werden der H.264-Videocodec und der AAC-Audiocodec verwendet. Wenn Sie Codecs verwenden möchten, müssen Sie eine Lizenz erwerben.

Für die Ogg-Videodatei verwenden Sie den Open-Source-Theora-Videocodec und den Vorbis-Audiocodec.

Für Videodateien im WebM-Format verwenden Sie den VP8- (oder VP9-) Videocodec und den Vorbis- (oder Opus-) Audiocodec. In diesem Fall ist keine Lizenz erforderlich.

Die richtigen MIME-Typen ausliefern

Der Server teilt dem Browser über den Content-Type-Antwortheader (den MIME-Typ) mit, welche Art von Datei er sendet. Wenn ein Server eine Mediendatei mit einem falschen oder fehlenden MIME-Typ sendet, kann der Browser die Wiedergabe verweigern, selbst wenn er den Codec unterstützt. Viele Server sind standardmäßig nicht für die Auslieferung von Ogg-, WebM- oder MP4-Dateien konfiguriert, sodass Sie die Zuordnung möglicherweise selbst hinzufügen müssen.

Auf Apache fügen Sie Folgendes zu einer .htaccess-Datei in Ihrem Website-Ordner hinzu:

AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4
AddType video/webm .webm

Auf Nginx fügen Sie die entsprechenden Einträge zum types { ... }-Block hinzu (normalerweise in mime.types):

types {
    audio/ogg  oga;
    audio/wav  wav;
    video/ogg  ogv ogg;
    video/mp4  mp4;
    video/webm webm;
}

So fügen Sie Untertitel und Beschriftungen hinzu

Texttracks wie Untertitel und Beschriftungen werden Audio- und Videodateien über das Element <track> hinzugefügt, das als Kindelement von <audio> oder <video> platziert wird. Jeder Track verweist auf eine WebVTT-Datei (.vtt).

Das Bereitstellen von Untertiteln für aufgezeichnete Medien ist eine Anforderung der Barrierefreiheit: Ein <track kind="captions"> erfüllt das WCAG-2.1-Erfolgskriterium 1.2.2, auf das gehörlose und schwerhörige Benutzer angewiesen sind, um das Audio zu verstehen.

Das Attribut kind teilt dem Browser mit, um welchen Typ von Texttrack es sich handelt:

subtitles — Übersetzungen oder Transkriptionen von Dialogen für Zuschauer, die hören können, aber die Sprache nicht verstehen. Dies ist die Standardeinstellung.
captions — wie Untertitel, beschreiben aber auch Soundeffekte und andere akustische Hinweise für Zuschauer, die nicht hören können.
descriptions — eine Textbeschreibung des Videoinhalts, die für Benutzer vorgelesen werden soll, die den Bildschirm nicht sehen können.
chapters — Kapiteltitel, die zur Navigation im Medium verwendet werden.
metadata — Tracks, die von Skripten verwendet und dem Benutzer nicht angezeigt werden.

Beispiel zum Hinzufügen von Untertiteln zu einer Videodatei:

Untertitel für eine Videodatei mit dem track-Element

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px;
        height: 200px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
      <track default kind="captions" label="English" srclang="en" src="/build/videos/arcnet.io(7-sec).vtt" />
    </video>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </p>
  </body>
</html>

Probier es selbst »

Tipp

Um den Videoplayer auf der Seite auszurichten, platzieren Sie das Element <video> in den Container <div>, weisen Sie ihm eine Klasse zu und definieren Sie dann die Breite und Höhe entsprechend der Größe Ihres Videos.

Audio- und Videoattribute

Attribut	Beschreibung
autoplay	Ermöglicht, dass Audio/Video automatisch abgespielt wird, während der Rest der Seite geladen wird.
controls	Ermöglicht die Steuerung der Audio-/Videowiedergabe, einschließlich Lautstärke sowie Pause/Fortsetzen der Wiedergabe.
loop	Ermöglicht, dass Audio/Video erneut abgespielt wird, sobald es endet.
muted	Lässt die Medien standardmäßig stumm abgespielt werden.
preload	Gibt das Puffern großer Dateien an. Es kann einen dieser Werte haben: "none" (puffert die Datei nicht), "auto" (puffert die Mediendatei) oder "metadata" (puffert nur die Metadaten der Datei).
src	Die URL des einzubettenden Audio-/Videomaterials. Sie ist optional.
poster	Dies ist die URL eines Bildes, das vor der Wiedergabe des Videos angezeigt wird.
width	Gibt die Breite des Anzeigebereichs des Videos in CSS-Pixeln an.
height	Gibt die Höhe des Anzeigebereichs des Videos in CSS-Pixeln an.

Practice

Übung

Welche zwei HTML5-Elemente betten Medien direkt ein, ohne Plugins?

Das audio-Element und das video-ElementDas embed-Element und das file-ElementDas multimedia-Element und das sound-ElementDas mp3-Element und das mp4-Element

Übung

Damit Autoplay in modernen Browsern zuverlässig funktioniert, sollte das Medium außerdem:

Stummgeschaltet sein, da Browser Autoplay mit Ton blockierenDas loop-Attribut gesetzt habenEin Posterbild habenMit preload auf auto vorgeladen werden

Übung

Welcher track-Typ erfüllt WCAG 1.2.2, indem er Dialoge und Soundeffekte für gehörlose Benutzer beschreibt?

kind auf captions gesetztkind auf chapters gesetztkind auf metadata gesetztkind auf descriptions gesetzt