i

Audio- und Videodateien

Beispiel

Audio- und Videodateien lassen sich leicht auf Webseiten einbinden.

Beispielseite

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.

Suche

v
1.1.2.4.9
www.inf-schule.de/information/informationsdarstellunginternet/strukturbeschreibunghtml/exkurs_html/audiovideo
www.inf-schule.de/1.1.2.4.9

Rückmeldung geben