CSS, HTML und Javascript mit {stil}

Video auf Webseiten für alle Browser

Videoformate und Browser

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

Die modernen Browser bringen kein Flash-Plugin mehr mit, dafür spielen sie Video ohne Plugin in bestimmten Formaten ab. Die alten Versionen von Internet Explorer erkennen das HTML5-Video-Tag nicht, aber wir können davon ausgehen, dass die meisten IE8-Benutzer ein Flash-Plugin installiert haben.

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 spielen gar nichts, wenn der Benutzer kein Plugin installiert.

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 …

Um nun tatsächlich allen Besuchern eine sichere Kombination anzubieten, gibt es nur eine 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, aber in den neuen Versionen spielen alle modernen Browser – auch FireFox – MP4-Video. Für die älteren Versionen von Internet Explorer (IE8 und älter) ist immer noch Flash-Video das sicherste Format.

Dafür 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. Für IE6, IE7 und IE8 muss dann neben dem Video-Tag noch ein Object-Tag mit dem Flash-Video bereitgestellt werden.

Wer also eine sichere Kombination für alle Browser sucht, muss das Video in drei Versionen vorbereiten und verbraucht den dreifachen Speicher.

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).

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, mit validem HTML, lassen sich Videos mit einer Kombination aus object-Tag, HTML5 video-Tag und einem Conditional Comment für Internet Explorer in Webseiten einsetzen.

if lt IE 9 bedeutet, dass der folgende HTML-Code vor allen Versionen von Internet Explorer verborgen wird, die älter sind als Version 9. IE9 spielt ja bereits Video mit dem video-Tag ab.

<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> 
<!--[if lt IE 9]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
      codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" 
      height="480" type="application/x-shockwave-flash" width="640">
   <param name="movie" value="player.swf" />
   <param name="flashvars" value="file=myvideo.flv" />
   <param name="allowfullscreen" value="true" /> 
   <param name="allowscriptaccess" value="always" />
   <img src="myvideo.png" alt="Alternatives Bild" width="639" height="452" /></a>
</object>
<![endif]-->

Damit IE6, IE7 oder IE8 das video-Tag nicht sehen, kann es durch CSS vor diesen Browsern verborgen werden. Dass passiert am besten ebenfalls mit einem Conditional Comment.

<style type="text/css" title="text/css" media="all">
<!--[if lt IE 9]>
video { display: none; }
<![endif]-->
</style>