Multimedia
7.1. Einbinden von Audio
Das <audio>-Tag wird verwendet, um Audioinhalte in HTML-Seiten einzufügen. Es unterstützt verschiedene Audioformate wie MP3, WAV und OGG.
Grundlegende Syntax:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Ihr Browser unterstützt das Audio-Tag nicht.
</audio>
Attribute:
controls: Zeigt die Standard-Audio-Steuerelemente (Play, Pause, Lautstärke) an.autoplay: Startet das Audio automatisch, wenn die Seite geladen wird.loop: Wiederholt das Audio in einer Endlosschleife.muted: Stellt das Audio standardmäßig auf stumm.
Beispiel:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Ihr Browser unterstützt das Audio-Tag nicht.
</audio>
7.2. Einbinden von Video
Das <video>-Tag wird verwendet, um Videoinhalte in HTML-Seiten einzufügen. Es unterstützt verschiedene Videoformate wie MP4, WebM und OGG.
Grundlegende Syntax:
<video controls width="600">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Ihr Browser unterstützt das Video-Tag nicht.
</video>
Attribute:
controls: Zeigt die Standard-Video-Steuerelemente (Play, Pause, Lautstärke, Fortschrittsbalken) an.autoplay: Startet das Video automatisch, wenn die Seite geladen wird.loop: Wiederholt das Video in einer Endlosschleife.muted: Stellt das Video standardmäßig auf stumm.poster: Zeigt ein Bild an, bevor das Video abgespielt wird.widthundheight: Legt die Größe des Videoplayers fest.
Beispiel:
<video controls width="600">
<source src="video.mp4" type="video/mp4">
Ihr Browser unterstützt das Video-Tag nicht.
</video>
7.3. Einbinden von YouTube-Videos
YouTube-Videos können mithilfe des <iframe>-Tags in HTML-Seiten eingebettet werden.
Grundlegende Syntax:
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
Beispiel:
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
7.4. Bildformate und Optimierung
Um die Ladezeiten zu verbessern und die Benutzererfahrung zu optimieren, sollten Bilder in geeigneten Formaten und Größen eingebunden werden. Die gängigsten Bildformate sind:
- JPEG (oder JPG): Gut für Fotos und Bilder mit vielen Farben.
- PNG: Unterstützt Transparenz und ist gut für Grafiken und Logos.
- GIF: Unterstützt Animationen und Transparenz, aber begrenzte Farbpalette.
- SVG: Skalierbare Vektorgrafiken, ideal für Logos und einfache Illustrationen.
Beispiel: Einbinden eines Bildes
<img src="bild.jpg" alt="Ein Beispielbild" width="200" height="150">