HTML5 Video Tutorial – Teil 1 – Dateiformate und Konvertierung

Februar 18, 2011 11:13 pm Schreibe einen Kommentar

In dieser Tutorialreihe zeige ich euch, wie ihr selbst Videos auf eurer Homepage in einem Player präsentieren könnt. Hierbei wird auf das neue HTML5 Videoelement und als Fallbacklösung auf Flash zurückgegriffen.

Das iPhone und iPad sollen ebenfalls unterstützt werden.

Teil 1 behandelt die benötigten Formate und die Konvertierung des Quellvideos in diese.

Teil 2 behandelt den eigentlichen HTML5 Videotag und wie eine Browserweiche in Javascript umgesetzt werden kann, um das Video auch auf dem iPhone darstellen zu können.
Zum zweiten Teil

Teil 3 behandelt die Implementierung einer Fallbacklösung für ältere Browser, welche den HTML 5 Videotag nicht unterstützen. Hierzu wird zusätzlich ein Flash Videoplayer eingebaut.
Zum dritten Teil

Begleitende Informationen zum Video

Kommandozeilen für ffmpeg und ffmpeg2theora:

Theora
ffmpeg2theora.exe --videobitrate 1500 --audiobitrate 112 --two-pass --optimize --output <AUSGABEDATEI> <EINGABEDATEI>

Webm
ffmpeg.exe -pass 1 -i <EINGABEDATEI> -vcodec libvpx -b 1500k -s 1280x720 -aspect 16:9 -an -f webm -y nul
ffmpeg.exe -pass 2 -i <EINGABEDATEI> -vcodec libvpx -b 1500k -s 1280x720 -aspect 16:9 -acodec libvorbis -ab 112k -f webm -y <AUSGABEDATEI>.webm

ffmpeg2theora:
http://v2v.cc/~j/ffmpeg2theora/

FFmpeg:
http://www.ffmpeg.org/

FFmpeg für Windows:
http://ffmpeg.arrozcru.org/autobuilds/

HandBrake:
http://handbrake.fr/

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

Autor*
E-Mail*
Webseite