MP4-Video und WebM
Der Standard für Video in HTML-Seiten ist MP4 oder WebM. Auf jeden Fall müssen drei Einstellungen für jedes Video im Internet getroffen werden:
- Speicherformat und Codec (Komprimierung – Video / Audio)
- Auflösung
- Datenrate
Speicherformat
Ähnlich wie bei Bildern, wo man sich zwischen JPEG, GIF und BMP entscheiden muss, muss auch für das Video ein Speicherformat festgelegt werden.
Videos bestehen i.d.R. aus einem Video-Track, einem oder mehreren Audio-Tracks, Untertiteln und evt. aus Metadaten wie dem Titel des Videos. Diese Tracks sind miteinander verbunden, damit Audio-Track und Untertitel immer synchron zu den gezeigten Bildern bleiben.
MP4, WebM, MOV, AVI, FLV, OGV … sind Containerformate für Videos – ähnlich wie TIF ein Container für Pixeldaten und PDF ein Container für Text und Bilder sind. Eine Rolle spielen allerdings heute MP4 und WebM.
Auflösung des Videos
Zusätzlich müssen hochauflösende Videos - z.B. ein UHD-Format mit 3840 x 2.160 Pixeln – verkleinert werden. Auf der einen Seite wäre UHD für die meisten Monitore zu groß und natürlich spart die Verkleinerung jede Menge Bandbreite.
- 4096 x 2304 (4K) – 4K-Auflösung
- 3.840 x 2.160 (UHD) – Ultra Hochauflösend
- 1920 × 1080 (Full HD) – Standard für Desktop
- 1280 × 720 (HD) – Gute Qualität & schnelleres Laden
- 640 × 360 (SD) – Notlösung für sehr langsames Internet
Immerhin strebt das Video Web für den Desktop der HD-Auflösung (1920 × 1080 Pixel) entgegen, aber zusätzlich sollte für mobile Geräte eine kleiner Version des Videos angeboten werden.
<video controls> <source type="video/mp4" media="all and (min-width:1440px)" src="video-large.mp4" > <source type="video/mp4" media="all and (min-width:320px)" src="video-small.mp4" > </video>
Datenrate des Videos
Bei der Vorbereitung des Videos für das Internet wird eine Datenrate eingestellt – die erzielbare Datenrate richtet sich nach der Übertragungsleitung vom Server zum Betrachter des Videos. Für eine normale DSL-Leitung können wir z.B. eine effektive Datenrate von 1 bis 5 MBit/s annehmen, für HD-Video sollte die Datenrate 2 bis 5 MBit/s betragen.
| Auflösung | Empfohlene Bitrate (H.264) | Empfohlene Bitrate (VP9) |
|---|---|---|
| 1080p (Full HD) | 4–8 Mbit/s | 2–4 Mbit/s |
| 720p (HD) | 2.5–5 Mbit/s | 1.5–3 Mbit/s |
| 480p (SD) | 1–2 Mbit/s | 0.5–1.5 Mbit/s |
Wenn möglich, nutzt man eine variable Bitrate (VBR) für bessere Qualität bei kleinerer Dateigröße.
Eines Tages sind die Server sicher schnell genug, um Videos on the fly von einem Format in ein anderen zu konvertieren, aber bis dahin müssen Videos »auf Vorrat« in die gängigen Formate und Auflösungen konvertiert werden. Kostenlose Programme zum Konvertieren von MP4- oder MOV-Videos in OGV oder WebM sind z.B. FFmpeg, und Handbrake.
- MP4 (MPEG-4-Dateiformat) | Standard-Containerformat für MPEG-4-ASP-/-AVC-Videostreams; basiert auf dem Quicktime-Containerformat.
- webM | Von Google als Standard für Video im Internet etabliert.
- AVI (Audio Video Interleave) | das wahrscheinlich überflüssigste Containerformat, das wir jetzt endgültig begraben können.
Software für Videokomprimierung
| Schritt | Empfohlene Einstellungen |
|---|---|
| Formate | WebM (VP9/AV1) + MP4 (H.264) |
| Auflösung | 720p oder 1080p |
| Bitrate | 2–6 Mbit/s VBR |
| Kompression | HandBrake / FFmpeg mit CRF 23 |
| HTML-Optimierung | <video> mit preload="metadata", poster, loading="lazy" |
| Responsive Design | max-width: 100%; height: auto; |
Browserunterstützung für Videoformate
Mit der Dateiendung der Videodatei können wir Videos am einfachsten identifizieren – .avi, .mov oder .mp4. Es gibt .mp4 (MPEG 4) und .m4v (von Apple entwickeltes Videoformat, wie mp4, aber mit optionalem DRM-Kopierschutz), Google kommt mit webM.
Browser spielen nur eine begrenzte Zahl von Videoformaten von Haus aus ab. Mit HTML5 bringen alle Browser ein Videoformat von Haus aus mit und spielen MP4 und WebM ab.
