HTML + CSS: Audio, Video und eingebettete Inhalte

Kurz: Moderne Browser spielen Audio und Video ohne Plugins ab.

Teil des Kurses HTML + CSS

Kapitel 10 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Moderne Browser spielen Audio und Video ohne Plugins ab.

Video

<video controls width="480" poster="vorschau.jpg" preload="metadata">
  <source src="film.webm" type="video/webm">
  <source src="film.mp4" type="video/mp4">
  <track kind="subtitles" src="untertitel-de.vtt" srclang="de" label="Deutsch" default>
  <p>Dein Browser kann das Video nicht abspielen. <a href="film.mp4">Video herunterladen</a></p>
</video>

Attribut	Bedeutung
controls	zeigt Bedienelemente (Play, Pause, Lautstärke)
autoplay	startet automatisch (Browser erlauben es meist nur ohne Ton: muted)
loop	wiederholt
muted	stumm
poster	Vorschaubild vor dem Start
preload	none, metadata, auto: wie viel vorab geladen wird
playsinline	spielt auf iPhones im Seitenfluss statt im Vollbild

Mit mehreren <source> bietest du verschiedene Formate an (MP4/H.264 läuft überall, WebM/VP9 und AV1 sind kleiner).

Audio

<audio controls>
  <source src="lied.ogg" type="audio/ogg">
  <source src="lied.mp3" type="audio/mpeg">
  Dein Browser unterstützt kein Audio.
</audio>

Untertitel und Barrierefreiheit

• Stelle für Videos Untertitel (<track> mit WebVTT-Datei) und möglichst ein Transkript bereit
• Spiele nichts automatisch mit Ton ab
• Blinkende Inhalte vermeiden (mehr als dreimal pro Sekunde kann Anfälle auslösen)
• Bedienelemente per Tastatur erreichbar lassen: nicht controls entfernen, ohne Ersatz zu bauen

Eine WebVTT-Datei sieht so aus:

WEBVTT
 
00:00:01.000 --> 00:00:04.000
Willkommen zu diesem Video!
 
00:00:04.500 --> 00:00:08.000
Heute lernen wir HTML.

Einbettungen mit iframe

Ein <iframe> zeigt eine andere Webseite in deiner Seite: Karten, YouTube-Videos, Formulare:

<iframe src="https://www.example.org/einbettung"
        title="Beschreibung des Inhalts"
        width="560" height="315"
        loading="lazy"
        sandbox="allow-scripts allow-same-origin"
        referrerpolicy="no-referrer"
        allowfullscreen></iframe>

• title ist Pflicht für Screenreader
• sandbox schränkt fremde Inhalte stark ein (nur freigeben, was nötig ist)
• Manche Seiten verbieten das Einbetten (Header X-Frame-Options)
• Binde Fremdinhalte (YouTube, Karten) datenschutzfreundlich ein: Mit Zwei-Klick-Lösung oder der Adresse youtube-nocookie.com. In der EU brauchst du oft eine Einwilligung.

Mit srcdoc bettest du eigenes HTML direkt ein, praktisch für isolierte Vorschauen:

<iframe title="Eingebettete Mini-Seite" srcdoc="<h3 style='color:teal'>Ich bin in einem iframe</h3><p>Mit eigenem Stil und Dokument.</p>" style="border:2px solid #888;width:100%;height:120px"></iframe>

Weitere Einbettungen

Element	Zweck
<embed>, <object>	ältere Plugins, PDF-Anzeige
<canvas>	Zeichenfläche für JavaScript
<svg>	Vektorgrafik direkt im HTML
<math>	mathematische Formeln (MathML)
<template>	HTML-Vorlage, die erst per JavaScript eingefügt wird
<slot>, Web Components	eigene wiederverwendbare Elemente

Merke

• <video> und <audio> mit controls; mehrere <source> für Formate
• Autoplay nur stumm; Untertitel und Transkript anbieten
• <iframe> braucht title; sandbox begrenzt Fremdinhalte
• Fremdeinbettungen datenschutzfreundlich einbinden
• poster, preload, loading="lazy" sparen Ladezeit

Übungsaufgabe

Binde ein Video (oder Audio) mit Bedienelementen, Vorschaubild und Rückfalltext ein und beschreibe in einem Transkript den Inhalt.

Quiz zur Selbstkontrolle

Welches Attribut zeigt die Bedienelemente eines Videos?

• controls (richtig)
• player
• buttons
• ui

Was braucht ein iframe unbedingt für Barrierefreiheit?

• Ein title-Attribut (richtig)
• Ein alt-Attribut
• Ein label
• Eine id

Wofür dient <track>?

• Untertitel für Video und Audio (richtig)
• Die Reihenfolge von Liedern
• Eine Rennstrecke
• Tracking-Pixel

Weiter im Kurs

Zurück: Semantisches HTML und Seitenaufbau

Weiter: Head, Meta-Angaben und globale Attribute

Alle Kapitel: HTML + CSS im Überblick