HTML Multimedia
HTML-Multimedia-Tags, Audio- und Videoformate, mehrere Quellen mit source, Untertitel hinzufügen und Autoplay korrekt einsetzen.
Multimedia umfasst fast alles, was man hören oder sehen kann (z. B. Töne, Musik, Bilder, Aufnahmen, Videos, Filme, Animationen usw.). Es gibt sie in verschiedenen Formaten. Webseiten können Multimedia-Elemente unterschiedlicher Formate und Typen enthalten.
Dieses Kapitel gibt Ihnen einen Überblick über die HTML-Tags, die Medien einbetten, die Audio- und Videoformate, die Browser tatsächlich unterstützen, und die praktischen Muster, die Sie benötigen: mehrere Formate mit <source> anbieten, Untertitel für die Barrierefreiheit hinzufügen und Autoplay korrekt handhaben.
Multimedia-Tags
HTML ermöglicht das Hinzufügen verschiedener Multimedia-Dateien auf Ihrer Website durch verschiedene Multimedia-Tags. Zu diesen Tags gehören:
<audio>zum Abspielen einer Audiodatei auf der Webseite,<video>zum Abspielen einer Videodatei auf der Webseite,<source>zum Anbieten mehrerer Mediendateien, damit der Browser eine auswählen kann, die er unterstützt,<track>zum Hinzufügen von Untertiteln zu einem<video>- oder<audio>-Element,<embed>zum Einbetten externer Inhalte (meistens PDFs) auf der Webseite,<object>zum Einbetten externer Ressourcen — heute weitgehend ein veraltetes Tag,<iframe>zum Einbetten anderer Webseiten.
Hier ist ein einfaches Beispiel mit dem controls-Attribut und <source>-Tags:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>Der Text zwischen dem öffnenden und schließenden Tag („Your browser does not support…") ist der Fallback-Inhalt. Er wird nur angezeigt, wenn der Browser das Element überhaupt nicht abspielen kann.
Warum mehrere <source>-Elemente verwenden
Kein einzelnes Audio- oder Videoformat wird von jedem Browser unterstützt. Um alle abzudecken, listen Sie mehrere <source>-Elemente innerhalb eines <audio>- oder <video>-Elements auf. Der Browser geht die Liste von oben nach unten durch und verwendet die erste Quelle, deren Format er abspielen kann, und ignoriert den Rest. Setzen Sie daher Ihr bevorzugtes Format an die erste Stelle.
Ein Video, das browserübergreifend funktioniert, bietet üblicherweise sowohl MP4 (breiteste Unterstützung, einschließlich Safari) als auch WebM (frei, offen, gut unterstützt in Chrome und Firefox) an:
<video width="640" height="360" controls poster="preview.jpg" preload="metadata">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Your browser does not support the video element.
</video>Das type-Attribut ermöglicht es dem Browser, ein nicht unterstütztes Format zu überspringen, ohne die Datei zuerst herunterzuladen — fügen Sie es daher immer ein.
Ein Audio-Element folgt dem gleichen Muster. MP3 funktioniert überall; Ogg ist eine freie Alternative, die von Chrome und Firefox unterstützt wird:
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>Untertitel und Barrierefreiheit
Verwenden Sie das <track>-Element, um einem Video Untertitel hinzuzufügen. Untertitel machen Ihre Inhalte für gehörlose und schwerhörige Zuschauer nutzbar und helfen jedem, der mit ausgeschaltetem Ton schaut. Der kind="captions"-Track verweist auf eine WebVTT-Datei (.vtt):
<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<track src="captions-en.vtt" kind="captions" srclang="en" label="English" default>
Your browser does not support the video element.
</video>Autoplay, Poster und Preload
Einige <video>-Attribute sind wissenswert:
autoplay— startet die Wiedergabe automatisch. Moderne Browser blockieren Autoplay mit Ton, daher wird ein Clip nur automatisch abgespielt, wenn er zusätzlichmutedist:<video autoplay muted>.poster— ein Bild, das vor dem Abspielen des Videos angezeigt wird (ein Platzhalterbild).preload— gibt an, wie viel vorab gepuffert werden soll:none,metadata(nur Dauer und Abmessungen) oderauto(der Browser kann die gesamte Datei laden).
Andere Inhalte einbetten: <object> und <embed>
Zwei ältere Tags können externe Ressourcen einbetten. Heute ist ihre Rolle begrenzt:
<object>war ein Allzweck-Container für Plugins und externe Dateien. Es ist heute weitgehend veraltet — für gewöhnliche Video- und Audioinhalte sollten Sie stattdessen<video>und<audio>verwenden.<embed>bettet ebenfalls externe Inhalte ein, wird aber auf modernen Seiten hauptsächlich zur Anzeige von PDFs verwendet.
<embed src="document.pdf" type="application/pdf" width="600" height="400">Multimedia-Formate
Multimedia-Elemente wie Audio oder Video werden in Mediendateien gespeichert. Sie können den Dateityp anhand der Dateiendung erkennen.
Gängige Multimedia-Erweiterungen sind .mp3, .mp4, .webm, .ogg, .wav, .mpg, .wmv und .avi. (Möglicherweise begegnen Ihnen noch .swf-Flash-Dateien, aber Flash ist veraltet — es wurde 2020 aus allen Browsern entfernt.)
Audioformate
Das neueste Format für komprimierte aufgenommene Musik ist MP3. Dieser Begriff ist gleichbedeutend mit digitaler Musik.
MP3 ist eine gute Wahl, wenn Ihre Website über aufgenommene Musik handelt.
| Format | Datei | Beschreibung |
|---|---|---|
| MIDI (Musical Instrument Digital Interface) | .mid .midi | Dies ist das Hauptformat für alle elektronischen Musikgeräte (z. B. Synthesizer und PC-Soundkarten). MIDI-Dateien enthalten digitale Noten, die von Elektronik abgespielt werden können, enthalten jedoch keinen Ton. Es funktioniert gut auf Musikhardware und Computern, aber nicht nativ in Webbrowsern. Moderne Browser können MIDI über die Web Audio API verarbeiten. |
| RealAudio | .rm .ram | Ermöglicht das Streaming von Audio mit niedrigen Bandbreiten. In Webbrowsern wird es nicht abgespielt. |
| WMA | .wma | Dieses Format wurde von Microsoft entwickelt und wird üblicherweise in Musik-Playern verwendet. Es funktioniert gut auf Windows-Computern, aber nicht in Webbrowsern. |
| AAC | .aac | Dieses Format wurde von Apple als Standardformat für iTunes entwickelt. Rohe .aac-Dateien haben begrenzte Browserunterstützung, aber AAC-Audio wird weitgehend unterstützt, wenn es in .mp4-Containern verpackt ist. |
| WAV | .wav | Dieses Format wurde von IBM und Microsoft entwickelt. Es funktioniert gut auf Windows-, Linux- und Macintosh-Betriebssystemen. Wird von HTML5 unterstützt. |
| Ogg | .ogg | Dieses Format wurde von der Xiph.Org Foundation entwickelt. Wird von HTML5 unterstützt. |
| MP3 | .mp3 | Dies ist das beliebteste Format für Musik-Player. Das Format hat eine gute Komprimierung (kleine Dateien) und hohe Qualität. Wird von allen Browsern unterstützt. |
| MP4 | .mp4 | Dies ist ein Videoformat, das auch für Audio verwendet werden kann. MP4-Video ist das zukünftige Videoformat im Internet, was zur automatischen Unterstützung von MP4-Audio durch alle Browser führt. |
Ein Container (wie .mp4 oder .ogg) ist die Dateiverpackung; der Codec (wie AAC, MP3 oder Vorbis) ist die Art, wie das darin enthaltene Audio kodiert ist. Browser berücksichtigen beides. In der Praxis können Sie für das Web auf MP3 (jeder Browser) und Ogg (Chrome und Firefox) setzen. AAC-Audio wird weitgehend unterstützt, wenn es in einem .mp4-Container geliefert wird.
Videoformate
| Format | Datei | Beschreibung |
|---|---|---|
| MPEG | .mpg .mpeg | Erstellt von der Moving Pictures Expert Group. Es ist das erste populäre Videoformat im Web. Nicht unterstützt in HTML5. |
| AVI (Audio Video Interleave) | .avi | Erstellt von Microsoft. Es wird normalerweise in TV-Hardware und Videokameras verwendet. Es funktioniert gut auf Windows-Computern, aber nicht in Webbrowsern. |
| WMV (Windows Media Video) | .wmv | Erstellt von Microsoft. Es wird normalerweise in TV-Hardware und Videokameras verwendet. Es funktioniert gut auf Windows-Computern, aber nicht in Webbrowsern. |
| QuickTime | .mov | Erstellt von Apple. Es wird normalerweise in TV-Hardware und Videokameras verwendet. Es funktioniert gut auf Apple-Computern, aber nicht in Webbrowsern. |
| RealVideo | .rm .ram | Erstellt von Real Media und ermöglicht Video-Streaming mit niedrigen Bandbreiten. Es wird noch für Internet-TV und Online-Video verwendet, wird aber nicht in Webbrowsern abgespielt. |
| Flash | .swf .flv | Veraltet. Adobe Flash Player wurde 2020 aus allen modernen Browsern entfernt. Dieses Format gilt nun als Legacy und erfordert Drittanbieter-Emulatoren zum Abspielen. |
| Ogg Theora | .ogg | Erstellt von der Xiph.Org Foundation. Wird von HTML5 unterstützt. |
| WebM | .webm | Erstellt von Mozilla, Opera, Google und Adobe. Wird von HTML5 unterstützt. |
| MPEG-4 oder MP4 | .mp4 | Erstellt von der Moving Pictures Expert Group. Es wird allgemein in TV-Hardware und neueren Videokameras verwendet. Von YouTube empfohlen. Wird von allen HTML5-Browsern unterstützt. |
Für HTML5-<video> sollten Sie bei MP4 (H.264-Video + AAC-Audio — funktioniert überall, einschließlich Safari), WebM und Ogg bleiben (beide werden in Chrome und Firefox unterstützt). MP4 zusammen mit WebM-<source>-Elementen deckt im Wesentlichen alle modernen Browser ab.
Browserunterstützung
Audio und Video werden nativ von allen modernen Browsern abgespielt — keine Drittanbieter-Plugins erforderlich. Die Unterstützung ist nicht identisch für alle Formate, weshalb Sie mehrere <source>-Elemente anbieten:
- Audio — MP3 und AAC (in
.mp4) funktionieren in jedem großen Browser, einschließlich Safari. Ogg/Vorbis funktioniert in Chrome und Firefox, aber nicht in Safari. - Video — MP4 (H.264) funktioniert überall, einschließlich Safari. WebM und Ogg/Theora funktionieren in Chrome und Firefox.
Die sichere, weit verbreitete Kombination ist MP4 + WebM für Video und MP3 + Ogg für Audio.