Webvideo für alle Browser

Bringen wir es auf den Punkt: Welches Video-Format ist heute für das Internet geeignet?

Die modernen Browser spielen Video ohne Plugin in bestimmten Formaten ab, aber anders als in den Anfängen von HTML5 und dem Video-Tag beherrschen heute alle Browser Video im MP4-Format von Haus aus.

Videoformate für Webseiten
18-12-15 SITEMAP

Vielfalt von MP4 bis OGG/OGV und WebM

Firefox und Chrome spielen OGG/OGV oder WebM und auch MP4 Video ohne Plugin, Safari will MP4 oder M4V oder MOV, Internet Explorer spielt ab Version 9 MP4-Video. IE 8 und noch ältere Version spielten gar nichts, wenn der Benutzer kein Plugin installieren wollte.

MP4

Chrome, Firefox, IE 9+, Opera, Safari

M4V

Chrome, Safari

OGV / OGG

Chrome, Firefox, Opera

WebM

Chrome, Firefox, Opera

Welcher Browser spielt welches Video-Format ab? Heute müssen wir bei dieser Frage auch an Smartphones, iPad und Tabletts denken. Aber da Android genauso wie iOS MP4 abspielt und unsere Kameras – egal ob Handy-Kamera oder Systemkamera – fast ausnahmslos MP4 aufnehmen, ist MP4 die sichere Wahl für Video für das Internet.

MP4-Video vom Desktop bis zum Handy

Um tatsächlich allen Besuchern eine sichere Kombination anzubieten, gab es mit dem aufkommenden HTML5 zunächst nur die Lösung: Nimm Zwei – ein MP4-Video mit dem H.264-Codec für Safari und IE ab Version 9. OGV-Video mit dem Theora OGG-Codec für Firefox, Chrome und Opera ist eine nette Geste. Heute haben alle anderen Formate ihre Relevanz verloren.

Darum also dürfen im HTML5-Video-Tag mehrere source-Tags stehen: Dann kann sich der Browser das Format aussuchen, mit dem er das Video ohne Plugin abspielen kann.

Heute versorgen mehrere source-Elemente in einem Video-Tag vorzugsweise Handys mit einer handlichen Auflösung und Desktop-Monitore mit einer höheren Auflösung.

Software zum Konvertieren und Transcodieren von Videos

Handbrake ist Open Source, steht unter einer GPL-Lizenz, läuft auf Mac OS X, Linux und Windows und konvertiert nahezu alle Arten von Video ohne großen Firlefanz in MP4-Video (oder M4V).

handbreak

ffmpeg2theoa läuft ebenfalls auf Mac OS X, Linux und Windows und transformiert nahezu jedes Video in das OGV-Format mit dem Theora-OGG-Codec. ffmpeg2theora ist ein Kommandozeilenprogramm.

Video in HTML-Seiten einbetten

Ohne Javascript, ohne Plugin und ohne Video-Player lassen sich Videos mit dem HTML5 video-Tag in Webseiten einsetzen.

<video class="hide-in-ie8" controls="true" height="480" width="640"> 
   <source src="myvideo.m4v" type="video/mp4" /> 
   <source src="myvideo.mp4" type="video/mp4" /> 
   <source src="myvideo.ogv" type="video/ogg" /> 
</video> 

M4V ist ein Videocontainer, der Videos mit MEPG1, 2 und 4 komprimiert. MPEG4 enthält Codecs wie Xvid, Divx und H264.

M4V ähnelt MP4, aber die Dateien können im Unterschied zu MP4 DRM-kopiergeschützt sein, und sind in erster Linie für iTunes-Video gedacht.

Aspect Ratio – das Seitenverhältnis

Die Frage nach dem Video-Format ist zugunsten von MP4 entschieden. Die Frage ist heute eher, wie Video Fullscreen auf Desktop-Monitoren und Smartphones abgespielt wird, denn das Seitenverhältniss (Aspect Ratio) der Geräte reicht von 4:3 bis zu 16:9. Auch hier hat sich ein Format auf breiter Linie durchgesetzt: 16:9.

Aspect Ration – Seitenverhältnis von Handys, Tablett und Desktop-Monitor

Video-Auflösung für 16:9

  • 1960 x 1080 (1080p)
  • 1280 x 720 (720p)
  • 960 x 540 (540p)

Wenn das Video in einem älteren Format (meist 4:3) vorliegt, spielen Smartphones das Video automatisch in einer Letterbox mit schwarzen Streifen rechts und links ab oder beschneiden das Video oben und unten.

video-4-3-auf-smartphone

Auf Tabletts im 4:3-Format hingegen wird Video im 16:9-Format mit schwarzen Streifen oben und unten abgespielt oder das Video wird rechts und links beschnitten.

1112 px 834 px 1920 px 1080 px 892 px 412 px 568 px 320 px Aspect Ratio: 1920/1080 = 16:9 = 1.77 Aspect Ratio: 1112/834 = 1.33 Aspect Ratio: 892/412 = 2.16 Aspect Ratio: 568/322 = 16:9 = 1.77