EMZETT.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
controlsentfernen, 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>titleist Pflicht für Screenreadersandboxschrä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:
Ergebnis
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>mitcontrols; mehrere<source>für Formate- Autoplay nur stumm; Untertitel und Transkript anbieten
<iframe>brauchttitle;sandboxbegrenzt Fremdinhalte- Fremdeinbettungen datenschutzfreundlich einbinden
poster,preload,loading="lazy"sparen Ladezeit
Aufgabe
Binde ein Video (oder Audio) mit Bedienelementen, Vorschaubild und Rückfalltext ein und beschreibe in einem Transkript den Inhalt.