Audio & Video
Die Sprache der Sinne
Es ist ein Abend, der alle Sinne berührt: Ein Barde zupft die Saiten seiner Laute, während seine Stimme die Herzen aller Zuhörer erreicht. Doch wie kannst du diese Magie, dieses Erlebnis voller Musik und Emotionen, in Worten wiedergeben? Die Melodien, die tiefen Gefühle des Sängers und die Pracht der Lichter – all das lässt sich kaum in Text fassen.
Aber es gibt eine Lösung: Mit einem integrierten Audio- oder Video-Player in deinem Beitrag öffnest du ein Tor zur Welt der Klänge und Bilder. Deine Leser können den Takt spüren, die Melodien selbst erleben und die Atmosphäre hautnah fühlen, als wären sie mitten im Konzertsaal. Dein Bericht wird so zu einer echten Reise der Sinne, intensiv, bewegend und unvergesslich.
Medien im Web
Videos und Audio einbinden – für Inhalte, die gehört und gesehen werden!
Audio einfügen
Der Klangmagier
Das Herzstück der Audiomagie in HTML ist das <audio>-Element. Mit diesem mächtigen Werkzeug kannst du Audiodateien auf deiner Webseite zum Leben erwecken. Wie ein erfahrener Klangmagier, der nur mit einem Fingerschnippen Melodien in den Raum zaubert, lässt das <audio>-Element Musik und Geräusche direkt aus den Lautsprechern deiner Besucher erklingen.
<audio></audio>Audio & Video Attribute
Essenziell zu wissen
Um die volle Macht der <audio>- und <video>-Elemente zu entfalten, musst du ihre Attribute beherrschen. Diese magischen Befehle bestimmen, wie Audio und Video auf deiner Webseite erscheinen und gesteuert werden.:
- src: Das wichtigste Attribut, da es die Quelle der Audio- oder Videodatei festlegt, ob URL oder Dateiname auf deinem Server.
- controls: Die Bedienelemente, mit denen Nutzer die Wiedergabe starten, stoppen, pausieren und die Lautstärke regeln können. Ohne dieses Attribut ist das Audioelement unsichtbar und das Video nicht abspielbar.
- autoplay: Startet die Wiedergabe automatisch, sobald die Seite geladen wird.
- loop: Wiederholt die Wiedergabe endlos, bis der Nutzer die Wiedergabe stoppt
- muted: Stellt sicher, dass das Video oder Audio stumm abgespielt wird.
<audio src="snow-tree.mp3" type="audio/mpeg" controls loop></audio>
Video einfügen
Die Kunst der Bewegtbilder
Neben der Audiomagie beherrscht HTML auch die Kunst der bewegten Bilder. Mit dem <video>-Element zauberst du Videos direkt auf deine Webseite und erschaffst visuelle Erlebnisse, die deine Besucher in den Bann ziehen. Ob epische Abenteuer oder kurze Botschaften – bewegte Bilder bringen deine Geschichte lebendig auf den Bildschirm.
<video></video>Video Attribute
Die Feinheiten der Bewegtbilder
Die Attribute des <video>-Tags ähneln denen des <audio>-Tags. Neben den bereits erwähnten Attributen gibt es einige zusätzliche, die speziell für die Wiedergabe von Videos wichtig sind:
- poster: Das Vorschaubild, das angezeigt wird, bevor das Video geladen ist.
- width und height: Hier könntest du die Breite und Höhe des Videos in Pixeln festlegen, wenn CSS nicht einfach besser dafür wäre
- fullscreen: Die Vollbildmagie, mit der das Video im Vollbildmodus abgespielt werden kann.
<video src="yggdrasil.mp4" type="video/mp4" controls poster="yggdrasil.jpg">
Oh nein, dein Browser unterstützt das Video-Tag nicht.
</video>
unterschiedliche Dateiformate
Die richtige Auswahl treffen
Die Wahl des richtigen Dateiformats ist entscheidend, um sicherzustellen, dass deine Audio- und Videomagie überall funktioniert. Durch die Angabe mehrerer Formate in den <audio>- und <video>-Tags stellst du sicher, dass deine Inhalte auf jedem Gerät und in jedem Browser optimal abgespielt werden – egal, welche magische Maschine dein Besucher benutzt!
<video controls>
<source src="yggdrasil.mp4" type="video/mp4">
<source src="yggdrasil.webm" type="video/webm">
Dein Browser unterstützt das Video-Tag nicht.
</video>
<audio controls>
<source src="snow-tree.mp3" type="audio/mpeg">
<source src="snow-tree.ogg" type="audio/ogg">
Dein Browser unterstützt das Audio-Tag nicht.
</audio>Video: Die Formate mp4 und webm decken die meisten Browser ab.
Audio: Die Formate mp3 und ogg bieten ähnliche Kompatibilität.
Es gibt noch weitere Formate, die du nutzen kannst, schau doch mal nach bei „can I use“:
Audio
Video
Das <track>-Element
Untertitel und geheime Botschaften
Mit dem <track>-Element kannst du deine Videos und Audiodateien um eine neue Dimension erweitern: Text. Doch hier sprechen wir nicht nur von schnöden Untertiteln! Dieses magische Werkzeug lässt dich nicht nur Untertitel in verschiedenen Sprachen einfügen, sondern auch Beschreibungen oder andere nützliche Informationen einbinden. Ob du geheime Botschaften für deine treuen Gefährten verstecken oder einfach nur deine Inhalte für alle zugänglich machen willst – das <track>-Element öffnet dir die Tür zur Welt der barrierefreien Inhalte. Perfekt für jene, die den ganzen Zauber in allen Sprachen und Formen erleben wollen!
<video controls>
<source src="video.mp4" type="video/mp4">
<track kind="subtitles" src="subtitles_de.vtt" srclang="de" label="Deutsch">
<track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
</video>In diesem Beispiel fügt das -Element Untertitel für Deutsch und Englisch hinzu.