CSS, HTML und Javascript mit {stil}

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

HTML5 Video mit Javascript

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

Auf der anderen Seite kommt das Videomaterial in immer höherer Auflösung – Camcorder und Spiegelreflexkamera liefert bereits Full HD-Video in einer Auflösung von 1920 x 1080 Pixeln und 4K. 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 HD-Auflösung mit. Dennoch ist jeder Blick auf die Verteilung von Monitorgrößen ein Blick in die Glaskugel.

Die Verteilung von Monitorgrößen hängt natürlich vom Thema der Webseite und dem Besucherprofil ab. Auf jeden Fall aber hat sich das Besucherprofil in den letzten Jahren hin zu mobilen Geräten verschoben.

Jul 2012
11920 x 108020 %
21680 x 105015 %
31280 x 102415 %
41920 x 120010 %
62560 x 14403 %
nsonstige …
Sep 2016
1360 x 64020 %
2768 x 102410 %
31920 x 10807 %
42560 x 14401 %
51280 x 7521 %
nsonstige …

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

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
HD-Video1280x720 Pixel
DVD720×576 Pixel
Blue Ray1920×1080 Pixel

Runterrechnen und sparen | Videos in Full HD sollten für das Abspielen auf Webseiten heruntergerechnet werden … natürlich je nach erwartetem Publikum.

Eine Auflösung von 1280 x 720 Pixeln (das ist HD-Video) bringt zugleich eine große Ersparnis für die Bandbreite des Videos und brächte bereits die optimale Qualität für heute. 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.

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>

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.

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

Wichtig ist die Datenrate oder Bitrate. Im Allgemeinen gilt: Je höher die Datenrate, desto besser ist auch die Qualität, desto größer wird auch die Datei. Dabei legt man eine Datenrate fest, die auf das Equipement der potentiellen Betrachter ausgerichtet ist.

Video in DVD-Qualität | Die Datenrate ist eine der wichtigsten Stellschrauben für Video im Internet. Eine DVD wird mit ~ 9MBit abgespielt, damit der Film in hoher Qualität auch bei schnellen Szenen ruckelfrei abgespielt werden kann.

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.

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.

Seitenverhältnis des Videos

Video im Internet kann ein beliebiges Seitenverhältnis benutzt. Moderne Computer-Monitore haben meist ein Seitenverhältnis 16:9, das iPad2 hat ein Seitenverhältnis von 1024x768, also 4:3. Das Retina-Display des iPad 3 hat dasselbe Seitenverhältnis, aber eine Auflösung von 2048 x 1536 Pixeln bei 264 ppi.

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 abgespielt
HD-Video für das Seitenverhältnis des iPad 3 beschnitten