Audio- und Videodateien
Beispiel
Audio- und Videodateien lassen sich leicht auf Webseiten einbinden.
Hier der Quelltext zur gezeigten Webseite:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<title>Steckbrief von Bailey</title>
</head>
<body>
<h1>Steckbrief</h1>
<p><img alt="Foto von Bailey" src="img/bailey.jpg"/></p>
<p>
Ich heiße <em>Bailey</em>. Ich lebe in der Nähe
von Kaiserslautern.
</p>
<p>
Hier kannst du mich mal bellen hören:
</p>
<audio controls="" src="audio/bellen.mp3">
Dein Browser kennt das HTML5-audio-Element noch nicht.
</audio>
<p>
Im folgenden Video siehst du, wie ich mutig ins Meer laufe.
</p>
<video controls="" src="video/bailey.mp4">
Dein Browser kann dieses Video nicht wiedergeben.
</video>
</body>
</html>
Erläuterungen
-
Audio-Dateien werden mit dem
<audio>-Element, Video-Dateien mit dem<video>-Element eingebunden. -
Mit dem
src-Attribut lässt sich jeweils die Quelle angeben. -
Das
controls-Attribut führt dazu, dass Steuerelemente zum Abspielen einer Audio- bzw. Video-Datei erzeugt werden. -
Der zusätzliche Text wird im Browser angezeigt,
falls das
<audio>- bzw.<video>-Element nicht unterstützt wird.
Aufgabe
Probiere selbst, Audio- und Videodateien in deinen Steckbrief einzubinden. Achte darauf, dass du keine Urheberrechte verletzt.