Testen Sie Ihre Fähigkeiten: Audio und Video

Aufgabe 1

Bei dieser Aufgabe sollen Sie eine Audiodatei auf der Seite einbetten.

Um diese Aufgabe abzuschließen:

1. Fügen Sie den Pfad zur Audiodatei als Attribut hinzu, um sie auf der Seite einzubetten. Die Audiodatei heißt audio.mp3 und ist unter dem Pfad https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/audio.mp3 verfügbar.
2. Fügen Sie ein Attribut hinzu, damit Browser einige Standard-Steuerelemente anzeigen.

<h1>Basic audio embed</h1>

<audio></audio>

body {
  background-color: white;
  color: #333333;
  font:
    1em / 1.4 "Helvetica Neue",
    "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0;
}

* {
  box-sizing: border-box;
}

audio,
video {
  border: 1px solid black;
}

<h1>Basic audio embed</h1>

<audio
  controls
  src="https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/audio.mp3"></audio>

Aufgabe 2

In dieser Aufgabe sollen Sie einen etwas komplexeren Videoplayer markieren, mit mehreren Quellen, Untertiteln und weiteren Funktionen.

Um diese Aufgabe abzuschließen:

1. Fügen Sie ein Attribut hinzu, damit Browser einige Standard-Steuerelemente anzeigen.
2. Fügen Sie mehrere Quellen hinzu, die die Pfade zu den Videodateien enthalten. Die Dateien heißen video.mp4 und video.webm und sind unter den folgenden Pfaden verfügbar:
   1. https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/video.mp4
   2. https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/video.webm
3. Teilen Sie dem Browser im Voraus mit, auf welche Videoformate die Quellen verweisen, damit er eine fundierte Entscheidung treffen kann, welche er im Voraus herunterladen soll.
4. Geben Sie dem <video> eine Breite und Höhe, die seiner intrinsischen Größe entspricht (320 x 240 Pixel).
5. Stellen Sie sicher, dass das Video standardmäßig stummgeschaltet ist.
6. Zeigen Sie die Textspuren im media-Ordner an, in einer Datei namens https://raw.githubusercontent.com/mdn/learning-area/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/subtitles_en.vtt, während das Video abgespielt wird. Sie müssen den Typ explizit als Untertitel festlegen und die Untertitelsprache auf Englisch setzen.
7. Stellen Sie sicher, dass die Leser die Untertitelsprache identifizieren können, wenn sie die Standard-Steuerelemente verwenden.

<h1>Video embed</h1>

<video></video>

<h1>Video embed</h1>

<video controls width="320" height="240" muted>
  <source
    src="https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/video.mp4"
    type="video/mp4" />
  <source
    src="https://github.com/mdn/learning-area/raw/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/video.webm"
    type="video/webm" />
  <track
    kind="subtitles"
    src="https://raw.githubusercontent.com/mdn/learning-area/refs/heads/main/html/multimedia-and-embedding/tasks/media-embed/media/subtitles_en.vtt"
    srclang="en"
    label="English" />
</video>

• Zurück
• Übersicht: Strukturierung von Inhalten mit HTML
• Weiter