Audio, Video und Einbettungen

Video und Audio brauchen kein Plugin mehr und keine fremde Bibliothek. Beide sind seit HTML5 eingebaut und funktionieren nach demselben Muster.

01 / 03Video

<video
  controls
  poster="/lernen/media/demo-poster.jpg"
  width="480"
  height="270"
>
  <source src="/lernen/media/demo-video.webm" type="video/webm">
  <source src="/lernen/media/demo-video.mp4" type="video/mp4">
  <track
    kind="subtitles"
    src="/lernen/media/demo-untertitel.vtt"
    srclang="de"
    label="Deutsch"
    default
  >
  Dein Browser kann dieses Video nicht abspielen.
</video>

Anders als beim Bild ist video kein Void-Element: Es hat Inhalt, und der besteht aus mehreren Teilen.

controls blendet die Bedienleiste ein. Ohne dieses Attribut sieht der Nutzer ein Bild, das sich nicht starten lässt. Es ist ein Boolean-Attribut, steht also einfach da.

poster ist das Standbild vor dem Start. Ohne Poster zeigen Browser meist den ersten Frame, und der ist oft schwarz.

Die source-Elemente listen dieselbe Aufnahme in mehreren Formaten. Der Browser nimmt das erste, das er abspielen kann, genau wie beim picture. WebM ist kleiner, MP4 läuft überall. Wofür er sich entschieden hat, steht im Reiter „Netzwerk“: Hier ist es demo-video.webm, und das MP4 fragt er gar nicht erst an.

track bindet die Untertitel ein. kind="subtitles" sagt, worum es sich handelt, srclang nennt die Sprache, label erscheint im Menü, und default wählt die Spur vor.

Untertitel siehst du hier trotzdem keine, und im Reiter „Netzwerk“ steht auch, warum: Die Zeile für demo-untertitel.vtt trägt den Vermerk „fehlgeschlagen“, die Zahl am Reiter ist rot. Die Seite läuft hier abgeschottet und zählt damit als eigener Ursprung, und Untertiteldateien werden aus Sicherheitsgründen nur vom selben Ursprung geladen. Das Video selbst kommt an, die Spur dazu nicht. In einem echten Projekt liegen beide beieinander, dort funktioniert es.

Der Text ganz unten ist der Rückfall für Browser, die mit video gar nichts anfangen können. Das sind heute sehr wenige, kostet aber nichts.

Zu autoplay: Es gibt das Attribut, aber Browser blockieren automatisches Abspielen mit Ton grundsätzlich. Verlässlich losspielen darf ein Video nur zusammen mit muted, also stumm. Es gibt Ausnahmen, die an Browsereinstellungen und am bisherigen Verhalten des Nutzers hängen, aber darauf kann man nicht bauen. Das ist gut so.

02 / 03Audio

<audio controls>
  <source src="/lernen/media/demo-ton.ogg" type="audio/ogg">
  <source src="/lernen/media/demo-ton.mp3" type="audio/mpeg">
  Dein Browser kann diese Datei nicht abspielen.
</audio>

audio funktioniert genauso, nur ohne Bild. Dieselben source-Elemente, dasselbe controls, derselbe Rückfalltext. Für Podcasts, Aussprachebeispiele oder Hörproben reicht das vollständig aus. Auch hier gewinnt die erste Datei, die der Browser abspielen kann: Im Reiter „Netzwerk“ steht demo-ton.ogg.

Ohne controls ist ein audio-Element unsichtbar und für den Nutzer nicht bedienbar. Setz es also, außer du steuerst die Wiedergabe wirklich per JavaScript.

03 / 03Fremde Inhalte einbetten

<iframe
  title="Beispielhafte eingebettete Seite"
  width="400"
  height="150"
  loading="lazy"
  srcdoc="<h2>Eingebettete Seite</h2><p>Ein eigenes Dokument im Dokument.</p>"
></iframe>

Ein iframe ist ein Fenster zu einem anderen Dokument, mitten in deiner Seite. Im Beispiel steht das eingebettete Dokument direkt im srcdoc-Attribut. Im Normalfall nimmt man stattdessen src mit einer Adresse.

Im Reiter „Netzwerk“ bleibt es hier deshalb bei der einen Zeile für das Dokument: Was im Attribut steht, muss der Browser nirgends holen. Mit src stünde dort eine zweite Zeile.

Genau so bindet man ein YouTube-Video ein: Der Anbieter gibt dir einen fertigen iframe-Schnipsel mit einer Adresse im src, den kopierst du in deine Seite. Bei YouTube lohnt sich die Adresse mit youtube-nocookie.com statt youtube.com, weil sie ohne Zustimmung weniger Daten setzt.

Drei Dinge gehören an jedes iframe:

• title beschreibt, was eingebettet ist. Ein Screenreader liest sonst nur „Frame“ vor.
• width und height reservieren Platz, damit die Seite nicht springt.
• loading="lazy" lädt das eingebettete Dokument erst, wenn es gebraucht wird. Gerade bei Videoplayern spart das viel.

Und ein Hinweis, der über HTML hinausgeht: Ein iframe lädt fremden Code in deine Seite. Bei einem eingebetteten Videoplayer heißt das Cookies und Tracking, und damit ist es auch eine Frage des Datenschutzes.