HTML-Kurs / Audio, Video und externe Inhalte einbetten
HTML kann Mediendateien mit audio und video abspielen oder ein anderes Dokument innerhalb einer Seite mit iframe anzeigen. Der erfolgreiche Einbau hängt von den tatsächlichen Dateipfaden und den unterstützten Formaten ab. Nützliche Steuerungen, Untertitel oder Transkriptionen sowie die Zuverlässigkeit externer Inhalte sind ebenfalls wichtig.
Audio- und Videodateien abspielen
Das Beispiel geht davon aus, dass sich sample.mp3, sample.mp4 und sample-poster.webp neben der HTML-Datei befinden. Um es auszuführen, stellen Sie Dateien bereit, die Sie verwenden dürfen, und passen Sie die Namen bei Bedarf an. Medien benötigen ebenfalls korrekte Dateinamen, Pfade und Abmessungen, gemäß den Prinzipien von Bilder: img, Alternativtext und Abmessungen.
<audio controls>
<source src="sample.mp3" type="audio/mpeg">
Ihr Browser unterstützt die Audiowiedergabe nicht.
</audio>
<video controls width="640" height="360" poster="sample-poster.webp">
<source src="sample.mp4" type="video/mp4">
<track src="sample-de.vtt" kind="captions" srclang="de-DE"
label="Deutsche Untertitel" default>
Ihr Browser unterstützt die Videowiedergabe nicht.
</video>controls stellt die Wiedergabesteuerungen des Browsers bereit, und poster wird vor der Wiedergabe eines Videos angezeigt. Für Sprache oder bedeutungsvolle Geräusche liefern Sie genaue Untertitel. Die referenzierte sample-de.vtt wird nicht automatisch erstellt. Ohne diese Datei können die Untertitel nicht angezeigt werden.
Eine WebVTT-Untertiteldatei ist ein UTF-8-Text. Dieses minimale Beispiel zeigt nur eine einzige Anzeige für die ersten drei Sekunden; die tatsächlichen Untertitel sollten die gesprochenen Inhalte des Videos und wichtige Geräusche zu den entsprechenden Zeiten abdecken.
WEBVTT
00:00:00.000 --> 00:00:03.000
Willkommen bei Kleiner Garten.
Speichern Sie diesen Text als sample-de.vtt mit UTF-8-Kodierung. Zwischen der Zeitzeile und dem Untertiteltext darf keine Leerzeile stehen. Eine Leerzeile trennt erst den nächsten Untertitelblock ab. Die WebVTT-Referenz auf MDN beschreibt die Struktur des Formats.
Wenn wichtige Informationen über Audio vermittelt werden, stellen Sie auch eine Textabschrift bereit. Ermöglichen Sie den Benutzern, die Wiedergabe selbst zu starten, anstatt den Ton unerwartet automatisch abzuspielen. Wenn Sie mehrere source-Formate anbieten, müssen die zugrunde liegenden Dateien tatsächlich diese Formate verwenden; das Umbenennen einer Erweiterung konvertiert das Medium nicht.
Externen Inhalt mit iframe einbinden
Ein iframe zeigt ein anderes Dokument innerhalb der aktuellen Seite an. Die untenstehende URL ist ein struktureller Platzhalter und keine funktionale Medieneinbettung. Ersetzen Sie sie durch eine offizielle Einbettungs-URL, die vom Anbieter bereitgestellt wird.
<iframe
src="https://example.com/embed/example"
title="Präsentation des Beispielinhalts"
width="640" height="360"
loading="lazy"></iframe>Das title beschreibt den Zweck des Frames. Ein Anbieter kann die Einbettung untersagen, auch wenn die normale URL seiner Seite funktioniert. Externe Inhalte können die Privatsphäre, Cookies und die Leistung beeinflussen, daher verwenden Sie nur den offiziellen Einbettungscode eines vertrauenswürdigen Anbieters, wenn dieser einen Mehrwert bietet. Geben Sie den Titel oder den Kontext des eingebetteten Elements im umgebenden Text an, damit der Artikel auch dann verständlich bleibt, wenn es nicht geladen wird.
Passen Sie die Medien an und testen Sie einen lokalen Frame
Eine HTML-Breite von 640 passt sich nicht automatisch einem schmalen Anzeigefenster an. Fügen Sie dieses CSS in ein Style-Element im Head oder in eine verknüpfte Stylesheet-Datei ein. Das Video behält sein intrinsisches Verhältnis; die Übung mit dem Iframe verwendet eine 16:9-Anzeigebox. Passen Sie dieses Verhältnis an, wenn der eingebettete Inhalt ein anderes Verhältnis erfordert.
video, iframe {
display: block;
width: 100%;
max-width: 640px;
}
video { height: auto; }
iframe {
height: auto;
aspect-ratio: 16 / 9;
}Sie können die Dateipfade des Frames, das Layout und die alternative Navigation ohne Videodatei testen. Speichern Sie diese beiden Dateien zusammen als UTF-8. Diese Übung ist von keinem externen Dienst oder persönlichen Daten abhängig.
embed.html
<!doctype html>
<html lang="de-DE">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Übungsanweisungen</title>
</head>
<body>
<h1>Anweisungen für Kleiner Garten</h1>
<p>Dieses lokale Beispiel wird in einem iframe angezeigt.</p>
</body>
</html>frame.html
<!doctype html>
<html lang="de-DE">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Übung zu iframes</title>
<style>
video, iframe {
display: block;
width: 100%;
max-width: 640px;
}
video { height: auto; }
iframe {
height: auto;
aspect-ratio: 16 / 9;
}
</style>
</head>
<body>
<h1>Anweisungen lesen</h1>
<iframe src="embed.html" title="Anweisungen für Kleiner Garten" width="640" height="360"></iframe>
<p><a href="embed.html">Anweisungen in einer separaten Seite öffnen</a></p>
</body>
</html>Öffnen Sie frame.html und überprüfen Sie den eingebetteten Titel und Absatz, und testen Sie dann, ob sich der Rahmen an ein 390px-Fenster anpasst. Folgen Sie außerdem dem Link zur separaten Seite. Wenn Sie später eine externe Einbettung verwenden, überprüfen Sie die offizielle URL dieses Anbieters und seine Einbettungsrichtlinien.
WebVTT ist ein Textformat, das Zeitintervalle mit Untertiteln verknüpft. Wenn die Untertitel von einer lokalen Datei fehlschlagen, überprüfen Sie zuerst das Vorhandensein, die Erweiterung, die UTF-8-Codierung und die Intervalle der Untertitel, und vergleichen Sie dann, indem Sie HTML, Video und VTT vom selben HTTP-Entwicklungsserver mit derselben Herkunft bereitstellen. Einschränkungen bei file-URLs und Medientypen des Servers können das Laden beeinflussen. Das Umbenennen einer Erweiterung ist keine Medienkonvertierung.
<p><a href="sample.mp4">Beispielvideodatei öffnen</a></p>
<p><a href="transcript.html">Video-Transkription lesen</a></p>Richten Sie die Alternativen auf Dateien und eine Transkription aus, die Sie tatsächlich vorbereitet haben. Der Ersatztext innerhalb des Audio-/Video-Elements ist für Browser gedacht, die das Element nicht unterstützen; es handelt sich nicht um eine garantierte Fehlermeldung, die angezeigt wird, wenn ein kompatibler Browser eine Datei nicht laden kann. Halten Sie die erforderlichen Alternativen und Transkriptionen auch außerhalb des Players verfügbar.
Wenn das Medium nicht abgespielt wird oder nicht passt
- Überprüfen Sie, ob die Datei am angegebenen Pfad existiert und der Server den entsprechenden Medientyp sendet.
- Überprüfen Sie, ob der Browser die tatsächliche Codierung der Datei unterstützt und nicht nur die Dateinamenerweiterung.
- Verwenden Sie CSS, um die Breite auf kleinen Bildschirmen zu begrenzen, ohne das Seitenverhältnis des Videos zu verzerren.
- Überprüfen Sie für externe Inhalte die Einbettungsrichtlinien und die Bedingungen des Anbieters.
Siehe die Video-Referenz MDN und die Iframe-Referenz für element-spezifische Attribute. Wenden Sie den Umfang der manuellen Tests in Grundlagen der Barrierefreiheit: Titel, Links, Bilder und Tastatur auf Wiedergabebefehle, alternative Links und die Tastaturnutzung an.
