CSS, HTML und Javascript mit {stil}

Video für Webseiten II: Bitrate und Auflösung

HTML Video: Auflösung, Bitrate oder Datenrate und Seitenverhältnis (Aspect Ratio)

Video-DVDs hatten eine feste Auflösung und eine hohe Datenrate – klar, sie waren für den TV-Monitor gedacht und dessen Auflösung ist nun mal festgelegt.

Heute kommt das Videomaterial in immer höherer Auflösung aus dem Camcorder oder der Kamera des Handys uns selbst mit 4K aus der Systemkamera. Für viele Geräte und Internet-Verbindungen ist das eine zu große Datenmenge – vor allem, wenn wir an die mobilen Geräte denken und ihr eingeschränktes Datenvolumen denken.

Die Monitore, auf denen wir Videos im Internet ansehen, haben unterschiedliche Auflösungen. Dabei bringen selbst Smartphones heute Full-HD-Auflösung mit. Jeder Blick auf die Verteilung von Monitorgrößen ist nur ein Blick in die Glaskugel. Wir wollen eine ansehnliche und möglichst hohe Qualität für alle Besucher, die das Datenvolumen der mobilen Geräte nicht übermäßig beansprucht.

Die optimale Auflösung für Video im Internet gibt es auch ebensowenig wie das beste Video-Format.

SD (Standard Definition)

1024×576 Pixel

575p

HD (High Definition oder HD-ready)

1280×720 Pixel

720p

Full-HD

1920×1080 Pixel

1080p

UHD oder 4K (Ultra-HD)

mind. 3840 × 2160 Pixel

4K

Die Angaben in der dritten Zeile (575p, 720p, 1080p) geben die Höhe des Videos an. Immer wieder sehen wir diese Bezeichnung mit einem i statt einem p: Dann ist die physikalische Auflösung geringer und das Video wurde hochgerechnet (interpoliert).

SD HD FULL HD ULTRA HD

Monitore einschätzen

Beim digitalen Fernsehn wird schon mal mit der Auflösung geschummelt, um die Videodaten ohne Ruckeln und Aussetzer mit kleinen Datenraten über die Bühne zu kriegen. Dann wird nicht die HD-Auflösung von 1280x720 Pixeln geliefert, sondern das Video wird klein gerechnet und dann auf dem Monitor wieder vergrößert. Das bringt zwar ein unschärferes Bild, aber wer merkt das schon?

Typische Video-Größen
4K (auch Cinema 4k)4096 × 2160 Pixel
QFHD (Quad Full High Definition oder 2160p/i)3840 × 2160 Pixel
Auflösung Full HD1920x1080 Pixel
Blue Ray1920×1080 Pixel
HD-Video1280x720 Pixel

Die Frage, wieviele Pixel nun optimal sind, hängt genauso wie bei Fotografien auch vom Betrachtungsabstand ab. Auf dem Handy und auf dem Tablett sehen wir Videos mit einem Abstand von ca. 40 cm, auf dem Desktop-Monitor mit 40 bis 50 cm, im Meetingraum auf dem großen Monitor mit einem Abstand von ein paar Metern.

Runterrechnen und sparen | Videos in Full HD sollten für das Abspielen auf Webseiten heruntergerechnet werden.

  • Auf dem Desktop-Monitor bringt eine Auflösung von 1280 x 720 Pixeln (das ist HD-Video) eine große Ersparnis für die Bandbreite des Videos und bereits eine sehr gute Qualität.
  • Beim mobilen Geräten spart die SD-Auflösung von 1024×576 und bringt immer noch eine vernünftige Qualität.
  • Im Sitzungsraum mit dem großen Monitor sitzen wir in einigen Metern Abstand. HD oder 720p wären auch hier noch eine zufrieden stellende Variante.

Ob ein Video in dieser Auflösung ruckelfrei im Internet ohne große Verzögerung abgespielt werden kann, ist allerdings eine offene Frage, die stark vom System des Betrachters abhängt, von der Art des Bildmaterials und bei mobilen Geräten natürlich von der Anbindung.

Datenrate oder Bitrate

Die Datenrate ist eine der wichtigsten Stellschrauben für Video im Internet und ist sowohl für die Qualität als auch für die Dateigröße verantwortlich. Im Allgemeinen gilt: Je höher die Datenrate, desto besser ist die Qualität und desto größer wird die Datei.

Wie groß der Film in Hinsicht auf die Dateigröße ist, ist im Grunde genommen uninteressant, denn das Video muss nicht komplett zum Betrachter geliefert werden, bevor es abgespielt werden kann. Video wird in kleinen Häppchen zum Besucher transportiert und kann bereits anlaufen, während es noch übertragen wird.

Nicht vergessen dürfen wir allerdings, dass das Datenvolumen für mobile Geräte bei den meisten Verträgen auf 0.5 bis 1 GB beschränkt ist. Danach kann der Benutzer zwar immer noch surfen, aber die Geschwindigkeit wird beschränkt.

Wenn das Programm für die Videobearbeitung die Option bietet, wählt man eine variable Bitrate:

SD2-5 Mbps
720p5-10 Mbps
1080p10-20 Mbps

Datenrate und Bandbreite

Das digitale Fernsehn gönnt uns eine Datenrate von 12 Mbit/s. Allerdings nutzen die Sender diese Bandbreite meist für vier Kanäle …

ups. Da bleiben nur rund 2,5 bis 3,5 Mbit/s pro Kanal. Da wird noch ein wenig geschoben, denn die Sendung »Der Tierdoktor kommt« enthält vielleicht nur wenig Bewegung und kriegt nur 2,5 Mbit/s, aber Fußball hat schnelle Bilder und braucht eine höhere Bandbreite.

Beste Video-Qualität im Internet? | Das schaffen wir mit Videos im Internet (noch) nicht. Für Internet-Wählverbindungen ist die Datenrate begrenzt. So 2-5 MBit/s können wir dem Video heute gönnen, wenn wir davon ausgehen, dass heute fast alle eine schnelle DSL-Anbindung zur Verfügung haben. Einige Codecs erlauben eine Datenrate, die in einem Bereich von oben nach unten variieren darf (z.B. H.264).

Wie gut das Video im Internet aussieht, hängt jetzt davon ab, wie gut die Bandbreite zum Besucher ist und wie schnell die Videobilder sind.

Responsive Video

Auch wenn heute alle Browser MP4 abspielen und wir nicht mehr verschiedene Formate ausliefern müssen, macht es doch Sinn, verschiedene Auflösungen je nach Größe des Viewports zu bieten.

Das source-Tag des Video-Tags unterstützt Media Queries mit der Abfrage nach der Größe des Viewports – sowohl im video-Tag als auch im picture-Tag.

<video controls> 
   <source src="video-large.mp4" type="video/mp4" media="all and (min-width:680px)"> 
   <source src="video-small.mp4" type="video/mp4" media="all and (min-width:320px)">  
</video>

Seitenverhältnis (Aspect Ratio) des Videos

Video im Internet kann ein beliebiges Seitenverhältnis benutzt. Moderne Computer-Monitore haben meist ein Seitenverhältnis 16:9, das Retina-Display des iPads zeigt 2048 x 1536 Pixeln bei 264 ppi, also ein Seitenverhältnis 4:3. Ein iPhone 6s bis 8Plus mit Widescreen hat eine Auflösung von 1920 x 1080 Pixeln bei 401 ppi.

Seitenverhältnis (Aspect Ratio) von Handys, Tabletts, Desktop-Monitor und Notebook

Wenn ein bestimmtes Seitenverhältnis gewünscht wird, die das Eingangsmaterial nicht aufweist, muss das Video mit einer Letterbox gerendert werden oder muss beschnitten werden.

Video in Letterbox
Video in Letterbox abgespielt
Letterbox seitlich beschnitten
HD-Video für das Seitenverhältnis des iPad 3 beschnitten