Webvideo für alle Browser

Die modernen Browser spielen Video ohne Plugin in bestimmten Formaten ab und beherrschen Video im MP4-Format von Haus aus.

Firefox und Chrome spielen neben MP4 auch Video im Format OGG/OGV oder WebM, Safari M4V oder MOV.

Videoformate für Webseiten
18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Vielfalt von MP4 bis OGG/OGV und WebM

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

Chrome, Firefox, IE 9+, Opera, Safari

M4V

Chrome, Safari

OGV / OGG

Chrome, Firefox, Opera

WebM

Chrome, Firefox, Opera

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. OGV-Video mit dem Theora OGG-Codec für Firefox, Chrome und Opera ist eine nette Geste. Alle anderen Formate haben 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-Element 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).

Screenshot 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 HTML video 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.

Seitenverhältnis
Aspect Ratio – 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.