Audio und Video in HTML5
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 <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 zu verbinden. 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, Scrollleiste, Lautstärkeregler).
Audio und Video in HTML5
<audio src="name.ogg" controls></audio>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 die unterstützte Datei erkennen kann. Der MIME-Typ wird mithilfe des Attributs type definiert.
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="https://de.w3docs.com/build/audios/jingle_bells.ogg" type="audio/ogg" />
<source src="https://de.w3docs.com/build/audios/audio.mp3" type="audio/mpeg" />
</audio>
<p>Click the play button</p>
</body>
</html>Die beliebtesten Audioformate sind die folgenden:
MP3 – das beliebteste Audioformat, das verlustbehaftete Komprimierung verwendet und die Reduzierung der Dateigröße ermöglicht. Trotz der Beliebtheit bei den Nutzern verwenden TV-Sender und Radiosender modernere ISO-MPEG-Codecs wie AAC oder MPEG-H.
AAC (Advanced Audio Codec) — geschlossener Codec, MP3-Analogon, bietet jedoch im Vergleich dazu bei gleichem oder stärkerem Komprimierungsgrad eine höhere Qualität.
Ogg Vorbis— freies Format mit offenem Code, unterstützt in Firefox, Opera und Chrome. Bietet guten Klang, wird jedoch von Geräte-Playern nicht ausreichend unterstützt.
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 wird verwendet, um Bedienelemente anzuzeigen.
Video-Codecs und Video-Dateiformate
Jeder Browser unterstützt einen bestimmten Codec, deshalb muss die Videodatei, um die Videowiedergabe in allen Browsern zu ermöglichen, in mehreren Formaten bereitgestellt werden. Wie bei Audiodateien werden alle Formate von Videodateien im Element <source> aufgenommen, beginnend mit dem bevorzugtesten. Jede Videodatei muss ihren MIME-Typ haben, der durch das Attribut type definiert wird.
Um sicherzustellen, dass der Browser Videodateien verarbeiten kann, erstellen Sie im Ordner, in dem sich die Website befindet, eine Datei .htaccess, die MIME-Typen für ein Video definiert.
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=”http://techslides.com/demos/sample-videos/small.ogv” type="video/ogg" />
<source src="https://de.w3docs.com/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>
<p>Some information about video</p>
</body>
</html>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 Theora-Videocodec und den Vorbis-Audiocodec mit offenem Code.
Für Videodateien im WebM-Format verwenden Sie den VP8-Videocodec und den Vorbis-Audiocodec. In diesem Fall ist keine Lizenz erforderlich.
Die meisten Server liefern Ogg- oder mp4-Medien nicht mit den richtigen MIME-Typen aus. Dafür müssen Sie möglicherweise die entsprechende Konfiguration hinzufügen.
Audio und Video in HTML5
AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4So fügen Sie Untertitel und Beschriftungen hinzu
Untertitel und Beschriftungen werden Audio- und Videodateien über das Element <track> hinzugefügt, das als Kindelement von <audio> und <video> verwendet wird.
Beispiel zum Hinzufügen von Untertiteln und Beschriftungen zu Audio- und Videodateien:
Untertitel und Beschriftungen der Audio- und Videodateien
<!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="https://de.w3docs.com/build/videos/arcnet.io(7-sec).mp4">
<track default kind="subtitles" srclang="en" src="https://de.w3docs.com/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>TIP
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 dafür 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
Welche Tags werden verwendet, um Audio- und Videodateien in HTML5 einzubetten?