Testen Sie Ihre Fähigkeiten: Audio und Video

Audio und Video 1

In dieser Aufgabe möchten wir, dass Sie eine Audiodatei auf die Seite einbetten.

Um diese Aufgabe abzuschließen:

1. Fügen Sie den Pfad zur Audiodatei in ein geeignetes Attribut ein, um sie auf der Seite einzubetten. Das Audio 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 die Browser einige Standardsteuerungen anzeigen.

Der Ausgangspunkt der Aufgabe sieht so aus:

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

<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;
}

Der aktualisierte Inhalt sollte so aussehen:

<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>

Audio und Video 2

In dieser Aufgabe möchten wir, dass 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 die Browser einige Standardsteuerungen 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 informierte Entscheidung treffen kann, welches er vorab herunterladen soll.
4. Geben Sie dem <video> eine Breite und Höhe, die seiner intrinsischen Größe entspricht (320 x 240 Pixel).
5. Das Video sollte standardmäßig stumm geschaltet sein.
6. Zeigen Sie die Textspuren an, die im Ordner media 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 enthalten sind, wenn das Video abgespielt wird. Sie müssen den Typ explizit als Untertitel setzen und die Untertitelsprache auf Englisch.
7. Stellen Sie sicher, dass die Leser die Untertitelsprache identifizieren können, wenn sie die Standardsteuerungen verwenden.

Der Ausgangspunkt der Aufgabe sieht so aus:

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

<h1>Video embed</h1>

<video></video>

Der aktualisierte Inhalt sollte so aussehen:

<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