Testen Sie Ihre Fähigkeiten: Multimedia und Einbettung
Ziel dieses Fähigkeitstests ist es, zu beurteilen, ob Sie verstehen, wie man Video- und Audioinhalte in HTML einbettet.
Hinweis: Sie können Lösungen in den interaktiven Editoren auf dieser Seite oder in einem Online-Editor wie CodePen, JSFiddle oder Glitch ausprobieren.
Wenn Sie nicht weiterkommen, können Sie uns über einen unserer Kommunikationskanäle erreichen.
Aufgabe 1
In dieser Aufgabe möchten wir, dass Sie eine Audiodatei auf der Seite einbetten. Sie müssen:
- Den Pfad zur Audiodatei zu einem entsprechenden Attribut hinzufügen, um sie auf der Seite einzubetten. Das Audio heißt
audio.mp3
und befindet sich in einem Ordner innerhalb des aktuellen Ordners namensmedia
. - Ein Attribut hinzufügen, um Browsern zu ermöglichen, einige Standardsteuerungen anzuzeigen.
- Einen geeigneten Fallback-Text für Browser hinzufügen, die
<audio>
nicht unterstützen.
Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.
Aufgabe 2
In dieser Aufgabe möchten wir, dass Sie einen etwas komplexeren Videoplayer mit mehreren Quellen, Untertiteln und anderen Funktionen kennzeichnen. Sie müssen:
- Ein Attribut hinzufügen, um Browsern zu ermöglichen, einige Standardsteuerungen anzuzeigen.
- Einen geeigneten Fallback-Text für Browser hinzufügen, die
<video>
nicht unterstützen. - Mehrere Quellen hinzufügen, die die Pfade zu den Videodateien enthalten. Die Dateien heißen
video.mp4
undvideo.webm
und befinden sich in einem Ordner innerhalb des aktuellen Ordners namensmedia
. - Den Browser im Voraus wissen lassen, auf welche Videoformate die Quellen verweisen, damit er eine informierte Entscheidung darüber treffen kann, welche er im Voraus herunterladen soll.
- Dem
<video>
eine Breite und eine Höhe gleich seiner intrinsischen Größe (320 mal 240 Pixel) geben. - Das Video standardmäßig stumm schalten.
- Die im Ordner
media
enthaltenen Textspuren anzeigen, in einer Datei namenssubtitles_en.vtt
, wenn das Video abgespielt wird. Sie müssen den Typ explizit als Untertitel und die Untertitelsprache als Englisch festlegen. - Sicherstellen, dass die Leser die Untertitelsprache identifizieren können, wenn sie die Standardsteuerungen verwenden.
Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.